如何正确配置一个嵌套路由器(react-router-dom)

Question

我的网站将有页面，将需要一个页眉和一些页面没有。

例如，电子邮件验证页面，oauth页面等不需要标题。

但是对于应用程序本身，我需要一个包含搜索栏，链接，徽标等的标题。

我试图通过react router

拆分这些我现在有这个父路由器

<Router>
<Switch>
<Route path="/emailverfication">
<Emailverification />
</Route>
<Route path="/discordauth">
<DiscordOauthPortal />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>

在Home中我还有另一个路由器

<Container>
<Header>
<Link to="/games">Games</Link>
<Link to="/">Home</Link>
<SearchBar/>
<AuthLinks/>
</Header>
<Router>
<Switch>
<Route  path="/games">
<Games/>
</Route>
<Route  path="/">
<Main />
</Route>
</Switch>
</Router>
</Container>

通过手动输入url访问路径将到达所需的路径

但是点击链接不会。

我做错了什么?

Answer 1

删除<Router>，只使用并只保留<Switch>块，做到了这一点。子组件看起来像这样

<Container>
<Header>
<Link to="/games">Games</Link>
<Link to="/">Home</Link>
<SearchBar/>
<AuthLinks/>
</Header>
<Switch>
<Route  path="/games">
<Games/>
</Route>
<Route  path="/">
<Main />
</Route>
</Switch>
</Container>