React Router：如何在不同的页面上呈现两个不同的组件？

Question

I am building a react app. I am using react-router-dom V4.

class TodoApp extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Route path='/' component={TodoComponent}></Route>
                    <Route path='/about' component={About}></Route>
                </div>
            </Router>
        );
    }
}

How can I render these two different components on different pages? This is how the output looks:

TodoReact APP

Answer 1

您需要在您的根目录/路由中添加exact属性，当前两个路由都与/about匹配，因此两个组件都将显示：

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