相关疑难解决方法(0)

我目前正在使用react router v4进行嵌套路由.

最接近的示例是React-Router v4文档中的路由配置 .

我想将我的应用程序拆分为两个不同的部分.

前端和管理区域.

我在考虑这样的事情:

<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应该呈现在Frontpage组件中,而/ admin/home应该在Backend组件中呈现.

我尝试了一些变化,但我总是在没有击中/ home或/ admin/home.

编辑 - 19.04.2017

因为这篇文章现在有很多观点我用最终解决方案更新了它.我希望它对某人有帮助.

编辑 - 08.05.2017

删除旧解决方案

最终解决方案

这是我现在使用的最终解决方案.此示例还有一个全局错误组件,如传统的404页面.

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';

const Home = () => <div><h1>Home</h1></div>; …

我正试着用React Router v4渲染多个布局.

例如,我想要具有以下路径的页面具有布局1:

• 确切的路径="/"
• PATH = "/博客"
• 路径="/大约"
• 路径="/项目"

以及具有布局2的以下路径:

• PATH ="/博客/:ID
• PATH ="/项目/:ID

有效地回答了这里的问题,但对于第4版:为反应路由器组件使用多个布局