React-router v4 updates url but doesn't render component

Question

I'm using react-router v4, no redux. The code example is below:

class MainPage extends Component {
    render() {
        return (
            <div className="MainPage">
              <BrowserRouter>
                <Switch>
                  {/* <Route exact path='/' /> */}
                  <Route path='/signin' component={SignIn}/>
                  <Route path='/signup' component={SignUp} />
                  <Redirect from='*' to='/' />
                </Switch>
              </BrowserRouter>
            </div>
        );
    }
}

When I'm using Link it updates URL in browser but doesn't render anything, nothing happens. When I resfresh, everything becomes fine and component renderes;

export default class Navbar extends Component {
    render() {
        return (
            <div className="navbar">
              <BrowserRouter>
                <div>
                    <Link to='/signin'>Sign in</Link>
                    <Link to='/signup'>Sign up</Link>
                </div>
              </BrowserRouter>
            </div>
        );
    }
}

I already tried everything, even withRouter(Component), but it says that with router may only be used inside How can I deal with this?

First, you should remove BrowserRouter in the NavBar, then move this Navbar component to your MainPage, and put it inside the div with the class name "MainPage" but above the BrowserRouter. Hope it works — dnp1204
– dnp1204, Commented Jul 26, 2018 at 15:05
I changed the code in MainPage component and removed BrowserRouter from Navbar, and added Navbar in mainpage div above BrowserRouter, but now react tells me - You should not use <Link> outside a <Router> — Kirill
– Kirill, Commented Jul 26, 2018 at 15:31

devserkan · Accepted Answer · 2018-07-26 15:45:49Z

Here is the working code. As others explained you should use one BrowserRouter. If you want to render your Navbar component all the time then you should place it above Switch but under BrowserRouter hence you need Link there.

const Navbar = () => (
      <div className="navbar">
            <Link to='/signin'>Sign in</Link>
            <Link to='/signup'>Sign up</Link>
      </div>
);

class MainPage extends React.Component {
  render() {
    return (
      <div className="MainPage">
        <BrowserRouter>
            <div>
                <Navbar />
                <Switch>
                    {/* <Route exact path='/' /> */}
                    <Route path='/signin' component={SignIn} />
                    <Route path='/signup' component={SignUp} />
                    <Redirect from='*' to='/' />
               </Switch>
            </div>
        </BrowserRouter>
      </div>
    );
  }
}

heavyd · Accepted Answer · 2018-07-26 15:50:40Z

2

You should only have a single BrowserRouter component in your tree. The BrowserRouter component holds the shared state the router used to synchronize the URL with the rendered routes. In your situation, you are getting two different versions of router state because you rendering two BrowserRouter components so you should probably render a single BrowserRouter component somewhere higher in your component tree.

If you have an App component that renders both Navbar and MainPage then you can move the router into that component:

export default class App extends Component {
    render() {
        return (
            <BrowserRouter>
              <div className="AppContainer">
                <Navbar />
                <MainPage />
              </div>
            </BrowserRouter>
        );
    }
}

edited Jul 26, 2018 at 15:50

answered Jul 26, 2018 at 15:07

heavyd

17.8k5 gold badges59 silver badges76 bronze badges

3 Comments

Kirill Over a year ago

I changed the code in MainPage component and removed BrowserRouter from Navbar, and added Navbar in mainpage div above BrowserRouter, but now react tells me - You should not use <Link> outside a <Router>

heavyd Over a year ago

How are Navbar and MainPage rendered? Do you have other components that are rendering Navbar and MainPage?

Kirill Over a year ago

they rendrering in App component, <Navbar /> first, then <MainPage />

Collectives™ on Stack Overflow

React-router v4 updates url but doesn't render component

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related