React JS - React Router - Render content separately

Question

I am trying to render content in an element separate to the menu nav element, but it keeps rendering in the same element as the menu bar. I tried to separate the links from the router but then got errors.

Here is my Router component, which I am importing into my entry file:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import {BrowserRouter as Router, Route, Link, StaticRouter} from 'react-router-dom';

import Home from './Home.jsx';
import About from './About.jsx';
import BlogList from './BlogList.jsx';

const Routes = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/blog">Blog</Link></li>
            </ul>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/blog" component={BlogList} />
        </div>
    </Router>
)

export default Routes;

ReactDOM.render((
  <Routes />
), document.getElementById('main-nav'))

My question is:

How do render the content from the Home, About and Blog components in a seperate element so they don't render inside "#main-nav"? A route can only have 1 child element.

If I try to add the routes in their own div container I get errors. If I wrap a nav element to the ul, I get an error.

Ideally, I want something like this:

<nav id="main-nav">
    <div>
        <ul>
          <li a href="/">Home</a></li>
          <li a href="/about">About</a></li>
          <li a href="/blog">Blog</a></li>
        </ul>
    </div>
</nav>
<div id="content">
    Home / ABout / Blog Content in here
</div>

An answer for number two: because React Router uses the path to match URLs to render the component. That means / matches every single URL in your app. Use the exact prop to only match the root path. — Andrew Li
I just want a menu to display at all times. Not sure what the best way to go about it is, as I'm new to React. Any advise is appreciated. — Rick
I see. So you want your app to have a topbar with all the links at all times in all the routes? — Andrew Li

Leo1234562014 Leo1234562014 · Accepted Answer · 2018-01-22T02:22:00

I had the same issue and I fixed it spliting the HTML5 into subcomponents. Basically, you just need put all your components inside the <BrowserRouter> or into <StaticRouter> .For example into the render() try something like this:

        import { Router, Route, Link,NavLink} from 'react-router-dom';
        import createBrowserHistory from 'history/createBrowserHistory';
        import HeaderNav from './HeaderNav';
        import SectionContent from './SectionContent'; 
        import FooterComponent from './FooterComponent';    

        export default class Layout extends React.Component{
             constructor(props) {
                 super(props); 
             }
             render(){
                 var history=createBrowserHistory();
                 return(
                    <Router history={history}>
                       <HeaderNav/>
                       <SectionContent/>
                       <FooterComponent/>
                   </Router>
               ); 
           }
        }

Obviusly you also need the <NavLink> for the <nav> into the HeaderNav component and for the content you just need <Route> ,also you need history npm

React JS - React Router - Render content separately

1 Answers