我目前正在努力使用 React Router v4 来嵌套路由。
最接近的例子是路由配置React-Router v4 文档 https://react-router.now.sh/.
我想将我的应用程序分成两个不同的部分。
前端和管理区域。
我在想这样的事情:
<Match pattern="/" component={Frontpage}>
<Match pattern="/home" component={HomePage} />
<Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
<Match pattern="/home" component={Dashboard} />
<Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />
前端的布局和风格与管理区域不同。因此,在首页中,home、about 等路线应该是子路线。
/home
应呈现到 Frontpage 组件中并且/admin/home
应在后端组件内呈现。
我尝试了一些其他的变化,但我总是以没有击中而告终/home
or /admin/home
.
在react-router-v4中你不嵌套<Routes />
。相反,你把它们放在另一个里面<Component />
.
例如
<Route path='/topics' component={Topics}>
<Route path='/topics/:topicId' component={Topic} />
</Route>
应该成为
<Route path='/topics' component={Topics} />
with
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.path}/:topicId`} component={Topic}/>
</div>
)
这里有一个基本示例 https://reacttraining.com/react-router/web/example/basic直接来自反应路由器文档 https://reacttraining.com/react-router/web/guides/quick-start.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)