Question

我正在建立一个反应应用程序。我正在使用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>
        );
    }
}

如何在不同页面上呈现这两个不同的组件？这是输出的外观：

TodoReact APP

Answer 1

您需要将exact属性添加到根/路由，目前这两个路由都匹配/about，因此两个组件都会显示：

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

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

1 个答案: