相关疑难解决方法(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>; …

我正在将反应路由器添加到现有项目中.

目前,模型被传递到根组件,该根组件包含用于子导航的导航组件和主组件.

我发现反应路由器的例子只有一个子组件,多个子组件改变的最佳方法是什么,而不重复两者中的布局代码？