子路由未显示 React-router答案

【问题标题】：Child Route is not displaying React-router子路由未显示 React-router
【发布时间】：2018-09-22 18:41:41
【问题描述】：

我将路由分隔到不同的文件下面是代码。当我尝试导航/子路线时，什么都没有显示。它浪费了我的时间

routes.js:-

import  App  from "./components/app";
import  Post  from "./components/post";

export const routes = [
    {
      component: App,
      path: '/',
      childRoutes: [{
        path: 'child',
        component: Post
    }]
    },
    {
        component: Post,
        path: '/post',
        childRoutes: [{
          path: 'dashboard',
          component: App
      }]
      }
  ];
index.js:-
 <Router>
      <div>
        <Switch>


         {routes.map(props => <Route exact {...props}>{props.childRoutes.map(e=><Route exact {...e}/>)}</Route>)} 

        </Switch>
      </div>
    </Router>

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

你不能在react-router v4.x 中嵌套这样的路由（我更喜欢 v3.0.4 的众多原因之一）。您必须指向单个父组件，然后该组件具有单独的 Routes 以确定要挂载的组件或使用子路由填充 Route 的 render 方法。

工作示例：https://codesandbox.io/s/6zn2103rxw（渲染方法——不是很干净）

工作示例：https://codesandbox.io/s/ll33rmz0n7（映射路线——同样不是很干净）

工作示例：https://codesandbox.io/s/8knzzrq5k8（父组件——最容易阅读和理解）

routes/index.js

import React from "react";
import { Route } from "react-router-dom";
import Home from "../components/Home";
import Header from "../components/Header";
import FullRoster from "../components/FullRoster";
import Schedule from "../components/Schedule";

export default () => (
  <div>
    <Header />
    <Route exact path="/" component={Home} />
    <Route path="/roster" component={FullRoster} />
    <Route path="/schedule" component={Schedule} />
  </div>
);

components/FullRoster.js（父级）

import React from "react";
import { Route } from "react-router-dom";
import ShowPlayerRoster from "./ShowPlayerRoster";
import ShowPlayerStats from "./ShowPlayerStats";

export default ({ match }) => (
  <div>
    <Route exact path={match.path} component={ShowPlayerRoster} />
    <Route path={`${match.path}/:id`} component={ShowPlayerStats} />
  </div>
);

components/ShowRoster.js（子）

import map from "lodash/map";
import React from "react";
import { Link } from "react-router-dom";
import PlayerAPI from "../api";

export default () => (
  <div style={{ padding: "0px 20px" }}>
    <ul>
      {map(PlayerAPI.all(), ({ number, name }) => (
        <li key={number}>
          <Link to={`/roster/${number}`}>{name}</Link>
        </li>
      ))}
    </ul>
  </div>
);

components/ShowPlayerStats.js（子）

import React from "react";
import PlayerAPI from "../api";
import { Link } from "react-router-dom";

export default ({ match: { params } }) => {
  const player = PlayerAPI.get(parseInt(params.id, 10));
  return !player ? (
    <div style={{ padding: "0px 20px" }}>
      Sorry, but the player was not found
    </div>
  ) : (
    <div style={{ padding: "0px 20px" }}>
      <h1>
        {player.name} (#{player.number})
      </h1>
      <h2>Position: {player.position}</h2>
      <Link to="/roster">Back</Link>
    </div>
  );
};

【讨论】：

【解决方案2】：

您还需要使用前面的斜杠声明子路径：

childRoutes: [{
   path: '/child',
   component: Post
}]

【讨论】：