javascript - 在 Reactjs 中应用嵌套路由，因此只有新组件显示

Question

嗨，我想在这里实现的是，我有一些像标题和侧边菜单这样的组件在每个页面中都是相同的，所以我试图只渲染那些会有所不同但我似乎看不到的组件做对了，这是我的 index.js

<Router>
    <Switch>
       <Route exact path="/" component={HomePage} >
       </Route>
       <Route exact path="/SignUp" component={SignUp} >
       </Route>
    </Switch>
</Router>

这是注册组件

<Router>
     <Header />
     <Switch>
          <Route path="/signUp/hi">
                        hi
          </Route>
          <Route path="/signUp/hey">
                        hey
         </Route>
     </Switch>
</Router>

当我输入时，/signup/hi我希望看到一个带有标题和一个 hi 的页面，但它是一个空白页面，所以我做错了什么？

标签： javascriptreactjsreact-routerrouterreact-router-dom

Answer 1

从 /SignUp 路由中删除确切的属性，因为您想匹配 /SignUp 之后的任何内容。

<Route path="/SignUp" component={SignUp} />

index.js此外，对中提到的路线和组件中提到的路线使用相同的外壳。