How to have common components with react router? - reactjs

Question

So im trying to build a SPA (single page application) and i'm a little bit stumped as to how to include a common navbar through out the app without it being included through the whole application.
The way ive designed my code now is as follows:
ReactDOM.render(<Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider>, document.getElementById('root'));
this is where i use browserouter at the root element.
and then i have in my App component:
<div>
<Header />
<Router>
<Route exact path='/' component={Post} />
{this.props.categories && this.props.categories.map((cat, i) => {
console.log(cat.path)
return <Route path={`/${cat.path}`} component={array[i]} key={i} />
})}
</Router>
</div>
can someone point out what im doing wrong and how i should do it please as i havent a clue.

Answer 1

in your App component use Switch instead of Router ,
You are using two routers
you can give a route for App in Browser Router
ReactDOM.render(<Provider store={store}><BrowserRouter><Route path="/" component={App} /></BrowserRouter></Provider>, document.getElementById('root'));

Answer 2

In React Router V4 you are encouraged to use a top-level BrowserRouter component simply to provide the history API as context. You can actually render multiple routes simultaneously at different places in your app if you like. Try using <Switch> and place your routes inside of that. This component will show the first of its children that are of type <Route> that match the current path. Also provide the exact prop to make sure that nested routes don't get displayed when a deeper nesting is available. Your final example could look something like this:
<div>
<Header />
<Switch>
{categories.map(cat => <Route {...cat} />)}
</Switch>
</div>
And inside your categories you could have the props necessary for rendering the route, like path and component. This makes your example more concise.
const Component = React.Component
const { Switch, Route, Link } = ReactRouterDOM
const Router = ReactRouterDOM.BrowserRouter
const Home = () => <h1>Home</h1>
const Post1 = () => <h1>React</h1>
const Post2 = () => <h1>Redux</h1>
const Post3 = () => <h1>Udacity</h1>
const routes = [
{
name: 'Home',
path: '/',
component: Home
},
{
name: 'React',
path: '/react',
component: Post1
},
{
name: 'Redux',
path: '/redux',
component: Post2
},
{
name: 'Udacity',
path: '/udacity',
component: Post3
}
]
const Header = () => <header>
<nav>
{routes.map(route => <Link to={route.path} key={route.path} >{route.name}</Link>)}
</nav>
</header>
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Header />
<Switch>
{routes.map(route => <Route {...route} key={route.path} exact/>)}
</Switch>
</div>
);
}
}
ReactDOM.render(
<Router><App/></Router>,
document.getElementById('container')
);
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom#4.2.0/umd/react-router-dom.min.js"></script>
<div id="container">
<!-- NOTE: in this embedded fiddle, React Router will not work. See https://jsfiddle.net/tay99xu0/ for working demo reference. -->
</div>