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的页面，但是它是空白页面，所以我在做什么错了？

Answer 1

要与/ SignUp之后的内容匹配，请从/ SignUp路由中删除确切属性。

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

另外，对于index.js和组件中提到的路径使用相同的大小写。

Answer 2

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

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

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

在Reactjs中应用嵌套路由，因此仅显示新组件

2 个答案: