反応ルータの子供にアクセスする方法は？

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;

イムは、ルータを反応させます。私は4経路経路の子であるFoutpointone経路経路にアクセスすることができません。私はFour.jsに "{this.props.children}"を持っていますが、これは親から子どもにアクセスする必要がありますが、うまくいきません...うまくいきません。 Fourpointoneコンポーネントをどのように表現できますか？ 親ルートでは子ルートを使用できないようですので、私の子供は無視されます。どうして？その反応4.x

Answer 1

FourpointoneをFourの中にレンダリングする場合は、それを直接行うだけです。あなたは、それは次のようになりますルータ4を反応させるのに一箇所にすべてのRouteのコンポーネントを持っている必要はありません。

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;