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>
  );
}

我创建了一个导航栏，其中有一些这样的链接：

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 只显示 Home 内容，如果我在 Team 文本的 NavBar 中单击，url 会更改（到 localhost:3000/team），但页面内容始终是 Home.js。

当我单击导航栏中的团队文本时，如何显示团队内容？

谢谢你。

Answer 1

您需要指定每个路径渲染哪个组件，如下所示：

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