路由路由器v4无法反映链接的组件更改？

Question

What's wrong with my route structure? Used Link to navigate couldn't see the changes.

class App extends React.Component {
  render() {
    return(
      <BrowserRouter>
        <div>
          <AuthRoute></AuthRoute>
          <Switch>
            <Route path='' component={Home} />
            <Route path='/profile' component={Profile} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

https://codesandbox.io/s/r433m6kvvp

Answer 1

Changes:

1- Instead of path='' (blank path) use path='/' .

2- Use exact word with path='/' otherwise define that in that last, because if you don't use exact then / will match with /profile or any other route also.

Check the doc for more details about exact and Switch and how they work.

Like this:

<Route exact path='/' component={Home} />
<Route path='/profile' component={Profile} />

or

<Route path='/profile' component={Profile} />
<Route path='/' component={Home} />

Working Code .