反应路由器不在路线上渲染组件

Question

My root component is shown below:

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Menu />
            <Switch>
                <Route path='/'>
                    <Home />
                </Route>
                <Route path='/about'>
                    <About />
                </Route>
            </Switch>
        </Router>
    </Provider>,
    document.getElementById('root')
)

and then my Menu component is shown below:

function Menu() {
    return (
        <ul className='menu'>
            <li className='menu-item'>
                <Link to='/'>Home</Link>
            </li>
            <li className='menu-item'>
                <Link to='/about'>About</Link>
            </li>
        </ul>
    )
}

export default withRouter(Menu)

The problem is that when I click the relevant link, my About component does not render but the url shows up in the url bar. I am not sure what's wrong and I have gone through all of the questions related to this topic and none of their suggestions have helped me. I am using redux but I do not think that is what is causing the problem. Please help!

Answer 1

As mentioned, the exact prop should be added to the route that renders the Home component:

<Router>
    ...
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    ...
</Router>

The reason for that is to restrict rendering of the Home component to an exact match of "/" . Without the exact prop, the Home component will also be rendered for other partially matched routes (ie "/about" , which would be considered a partial match).

Some other suggestions; you might consider assigning the component rendered for a route via the component prop on the Route component by doing this:

    <Route exact path="/" component={Home} />

Additionally, you can avoid wrapping the Menu component with the withRouter .

For a working example, see this link - hope these pointers help! :)

Answer 2

add exact to your rout, like this

<Route exact path='/'>
  <Home />
</Route>
<Route exact path='/about'>
  <About />
</Route>

Answer 3

Use the Router logic like this.

 <Provider store={store}>
        <Router>
            <Menu />
            <Switch>
                <Route path='/' exact component = {Home}/>
                <Route path='/about' exact component = {About}/>
            </Switch>
        </Router>
    </Provider>,