Wie bekomme ich Zugang zum Kind im Reag 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 über Router reagieren zu lernen. Ich kann nicht auf den Foutpointone-Routenpfad zugreifen, der ein Kind des Vier-Wege-Pfades ist. Ich habe "{this.props.children}" in Four.js, die von Eltern auf Kinder zugreifen sollte, aber gut ... es funktioniert nicht und ich weiß nicht warum. Wie kann ich die Fourpointone-Komponente anzeigen? Es scheint, als ob ich die Kinderroute in der Elternroute nicht benutzen kann, so dass mein Kind ignoriert wird. Warum? Seine Reaktion 4.x

Answer 1

Wenn Sie Fourpointone innerhalb Four rendern möchten, sollten Sie es einfach direkt tun. Sie brauchen nicht all Route Komponenten an einem Ort zu haben, mit Router Reagieren 4. Es könnte wie folgt aussehen:

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;