CODEWITHSUNDEEP
reactjsreact-bootstrap
PotatoBox
PotatoBox

Reputation: 608

How to properly set up routes in the react-bootstrap navbar

I'm just starting learning React and wanted to create some navbar firstly, with links for not logged user and later for logged one, but I'm struggling with it. My code: https://codesandbox.io/s/beautiful-monad-4ygcg

The problem is that when I wrap navbar with router (from external routes.js), it's not being displayed at all but routes are working just fine, if type /login or /signup myself in the url. On the other side, if I comment out the router, navbar is being displayed, but routes are not working. I've read about LinkContainer, but it doesn't help much. I would assume that since navbar is being wrapped with router, it would be displayed and links would work. I don't want to have router in App.js, but in separate file for readability. My package.json dependencies:

"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.10",
"react-dom": "^16.8.6",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1"

Upvotes: 0

Views: 88

Answers (1)

ysfaran
ysfaran

Reputation: 7062

You forgot to render the children in your Router component:

class App extends React.Component {
  render() {
    return (
      <Router>
        <NavigationBar /> // this is a child of <Router/> here
      </Router>
    );
  }
}

class Router extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/login" component={LoginPage} />
        </Switch>
        {this.props.children} // missing line to render your NavigationBar
      </BrowserRouter>
    );
  }
}

Upvotes: 1

Related Questions