在 Reactjs 中应用嵌套路由,所以只显示新组件

Apply nested Routing in Reactjs so only new component Show

你好,我想在这里实现的是,我有一些组件,如 header 和侧边菜单,它们在每个页面中都是相同的,所以我试图只渲染正在运行的组件有所不同,但我似乎无法做到正确, 这是我的 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 时,我希望看到一个带有 header 和 hi 的页面,但它是一个空白页面,所以我做错了什么?

您需要在索引文件中指定所有以 SignUp 开头的页面都应该转到 SignUp,如下所示:

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

或将 exact path 更改为 path 注册路线

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

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

此外,index.js中提到的路由和组件中提到的路由使用相同的大小写。