React-Router-Dom:不显示页面内容

Question

我正在学习如何使用ReactJS，我已经安装了react-router-dom。

所以在我的App.js中：

function App() {
  return (
    <Router>
      <div>
        <Container>
            <NavBar />
                <Switch>
                    <Route path="/">
                        <Home />
                    </Route>
                    <Route path="/team">
                        <Team />
                    </Route>
                </Switch>
        </Container>
      </div>
    </Router>
  );
}

我创建了一个NavBar，其中包含如下链接：

return(
        <>
        <Container fluid="md">
            <Navbar bg="dark" variant="dark" >        
            <Nav className="mr-auto">
                <Link to="/" className="Text">Home</Link> 
                <Link to="/team" className="Text">Team</Link>         
            </Nav>
            </Navbar>
        </Container>
        </>
    )

现在我的问题是，App.js只显示主页内容，如果我单击团队文本上的NavBar，url会更改(变为Home.js :3000/ Team )，但页面内容始终是团队内容。

当我点击NavBar中的团队文本时，如何显示团队内容？

谢谢你。

Answer 1

您需要为每个路径指定呈现哪个组件，如下所示：

<Route path="/team" component={Team}>