How to get access to the child in react router?

Question

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>React Router class</h2>
        </div>
          <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/One">One</Link></li>
              <li><Link to="/Two">Two</Link></li>
              <li><Link to="/Three">Three</Link></li>
              <li><Link to="/Four">Four</Link></li>
          </ul>

      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Router, Route, Switch } from 'react-router';
import history from "./history";
import One from './One';
import Two from "./Two";
import Three from "./Three";
import Four from "./Four";
import Fourpointone from "./Fourpointone";
import NoMatch from "./NoMatch";





ReactDOM.render(
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/One" component={One} />
            <Route path="/Two" component={Two} />
            <Route path="/Three" component={Three} />
            <Route path="/Four" component={Four}>
                <Route path="/Four/:id" component={Fourpointone}/>
            </Route>
            <Route component={NoMatch} />
        </Switch>



    </Router>
    , document.getElementById('root'));
registerServiceWorker();

Four.js

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

class Four extends Component {
    render() {
        return (
            <div>
                <h1>Four component</h1>
                <ul>
                    <li><Link to="/Four/123">Four Point One</Link></li>
                </ul>
                {this.props.children}
            </div>
        );
    }
}

export default Four;

Fourpointone.js

import React, {Component} from 'react';

class Fourpointone extends Component {
    render() {
        return (
            <div>
                <h1>This is 4.1 component</h1>
            </div>

        );
    }
}

export default Fourpointone;

Im learning about react router. I cant access to Foutpointone route path which is child of Four route path. I have "{this.props.children}" in Four.js which should access from parent to children but well... it's not working and I dont know why. How can I diplay Fourpointone component? It seems like i cant use child route in parent route, so my child is ignored. Why? Its react 4.x

Mario F Mario F · Accepted Answer · 2017-08-22T08:27:07

if you want to render Fourpointone inside Four, you should just do it directly. You don't need to have all the Route components in one place with React Router 4. It could look like this:

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

class Four extends Component {
    render() {
        return (
            <div>
                <h1>Four component</h1>
                <ul>
                    <li><Link to="/Four/123">Four Point One</Link></li>
                </ul>
                <Route path="/Four/:id" component={Fourpointone}/>
            </div>
        );
    }
}

export default Four;

How to get access to the child in react router?

1 Answers