小编dat*_*oml的帖子

我目前正在使用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>; …

我的应用目前分为3部分：

• 前端
• 管理
• 错误

前端，管理和错误组件具有各自的样式。

前端和管理组件还具有其自己的Switch组件以在它们之间进行导航。

我面临的问题是，如果没有重定向组件，我将无法进入NoMatch路径。但是，当我这样做时，会丢失浏览器URL中的错误路径。

当内部Switch组件没有在其父Switch组件中不断搜索的匹配路由时，是否有机会？

这样，我就能打出NoMatch路线，并在URL中保留错误的路径。

编辑：我更新了我的答案，下面的最终解决方案按预期工作。

const Frontend = (props) => {
  const { match } = props;
  return (<div>
    <h1>Frontend</h1>
    <p><Link to={match.path}>Home</Link></p>
    <p><Link to={`${match.path}users`}>Users</Link></p>
    <p><Link to="/admin">Admin</Link></p>
    <p><Link to={`${match.path}not-found-page`}>404</Link></p>
    <hr />
    <Switch>
      <Route exact path={match.path} component={Home} />
      <Route path={`${match.path}users`} component={Users} />
      {
      // Workaround
      }
      <Redirect to="/error" />
    </Switch>
  </div>);
};

const Admin = (props) => {
  const { match } = props;
  return (<div>
    <h1>Admin</h1>
    <p><Link to={match.path}>Dashboard</Link></p>
    <p><Link to={`${match.path}/users`}>Edit Users</Link></p>
    <p><Link to="/">Frontend</Link></p>
    <p><Link to={`${match.path}/not-found-page`}>404</Link></p>
    <hr …