如何在 React 的分层组件中使用 {Switch, Route}？

Question

我在 App.js 中有路由，主要是注销、登录和主页。
里面 App.js :

return(
<>
<Switch>
      <Route exact path='/' component={Home} /> 
      <Route exact path='/signin' component={Signin} />
      <Route exact path='/logout' component={Logout} />
</Switch>
</>)

此外，我想要 Home.js 内的路由：

return( 
<>
<Navbar/>
<Switch>
      <Route exact path='/'>
        <LandingPage />
      </Route>
      <Route exact path='/settings'>
        <Settings username={username} />
      </Route>
</Switch>
</>
)

主页默认LandingPage组件，Navbar在LandingPage和Settings中通用。 LandingPage 组件显示完美，但是当我从 Navbar 单击“设置”按钮时，设置组件未显示。其他路线工作正常。
在 Navbar 中，我使用了 NavLink：

<NavLink className="nav-link" to="/">
      HOME
</NavLink>
<NavLink className="nav-link" to="/settings">
      SETTINGS
</NavLink>

为什么设置组件没有显示？？？

Answer 1

<Route exact path='/' component={Home} />

由于 exact 标志，任何不完全 "/" 的内容都不会与此匹配。因此，当 url 变为 "/settings" 时，您将停止渲染 Home 组件，这反过来意味着没有任何东西试图在“/settings”

处渲染路由

可能的解决方法是删除确切的内容，并重新排列您的组件，因此这种情况出现在符号 in/sign 之后：

<Switch>
  <Route exact path='/signin' component={Signin} />
  <Route exact path='/logout' component={Logout} />
  <Route path='/' component={Home} /> 
</Switch>

如何在 React 的分层组件中使用 {Switch, Route}？

How to use {Switch, Route} in hierarchical components in React?

javascript

reactjs

routes

components

react-component