在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 我希望看到一个有头和喜的页面，但它是一个空白的页面，所以我做错了什么？

Answer 1

删除SignUp路由中的精确属性，因为你想匹配SignUp之后的任何东西。

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

另外，在这里提到的路由使用相同的外壳。index.js 和组件中提到的那个。

Answer 2

你需要在你的索引文件中指定所有以 SignUp 开头的页面都应该转到 SignUp，像这样。

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

或者改成 exact path 到 path 登录途径