在 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
中提到的路由和组件中提到的路由使用相同的大小写。
你好,我想在这里实现的是,我有一些组件,如 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
中提到的路由和组件中提到的路由使用相同的大小写。