Child Route is not displaying React-router

Question

i separated routes to different file below is the code. when i try navigate /child route nothing is displaying.its killing my time

routes.js:-

import  Ap         


        

Answer 1

You can't nest routes like that in react-router v4.x (one of many reasons why I prefer v3.0.4). You have to point to a single parent component that then has separate Routes to determine which component to mount OR populate the Route's render method with child routes.

Working example: https://codesandbox.io/s/6zn2103rxw (render method -- not very clean)

Working example: https://codesandbox.io/s/ll33rmz0n7 (mapped routes -- again not very clean)

Working example: https://codesandbox.io/s/8knzzrq5k8 (parent component -- easiest to read and understand)

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 (parent)

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 (child)

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 (child)

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>
  );
};

Answer 2

You will need to declare the child path with a preceding slash as well:

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