反応ルータv4では、まだ `this.props.children`をAppコンテナで実行できますか？

Question

に反応し、ルータをV2、我々は

// inside of routes.js 

export default (
    <Route path="/" component={App}> 
    <IndexRoute component={PostsIndex} /> 
    <Route path="/posts/new" component={PostsNew} /> 
    <Route path="/posts/:id" component={PostsShow} /> 
    </Route> 
); 

を行い、その後、アプリケーションコンテナの内部で適切な子を表示することができます。

// inside app.js 

{this.props.children} 

が、反応し、ルータをV4に、{this.props.children}はいずれも動作しません。もっと。それは別の方法で行われますか？

Answer 1

V4はメジャーアップデートであり、< = V3の完全な書き換えです。あなたはV4にアップグレードする予定はなく、すべてが動作するようにしてください。 documentation examplesをチェックして、どのように動作するかを確認することをおすすめします。あなたのようなネストされたルートを示す基本的な例があります。

import React from 'react' 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:topicId`} component={Topic}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select a topic.</h3> 
    )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
) 

export default BasicExample 

Answer 2

私は同じ問題を抱えていたし、私はあなたがすることはできませんありませんと言っているソリューションに

const PageNavWithChildrenComponentInsideLayout = ({ match }) => { 

     return <div> 
      <ul> 
      <li> 
       <NavLink className="nav-link" to={"/consultant/childOne"} activeClassName={`${match.url}/childOne` ? "active": ""}> 
       </NavLink> 
       <NavLink className="nav-link" to={"/consultant/childTwo"} activeClassName={`${match.url}/childTwo` ? "active": ""}> 
       </NavLink> 
       <NavLink className="nav-link" to={"/consultant/childThree"} activeClassName={`${match.url}/childThree` ? "active": ""}> 
       </NavLink> 
      </li> 
      </ul> 

      {/** 
      Layout is Wrapper component corresponds parent v2,v3 
      **/} 

     <Layout> 

      {/**corresponds {this.props.children}**/} 

      <Route exact path={`${match.url}/childOne`} component={ChildOne}/> 
      <Route exact path={`${match.url}/childTwo`} component={ChildTwo}/> 
      <Route exact path={`${match.url}/childThree`} component={ChildThree}/> 

      </Layout> 

     </div>; 
    }; 

    export default PageNavWithChildrenComponentInsideLayout 

    {/**-------------Routes.js--------------*/} 


    export default routes=()=>{ 

    <Switch> 
    <Route path="/PageNavWithChildrenComponentInsideLayout" name="Parent" component={PageNavWithChildrenComponentInside}> 
     <Route path="/PageNavWithChildrenComponentInsideLayout/childOne" name="ChildOne" component={ChildOne} /> 
     <Route path="/PageNavWithChildrenComponentInsideLayout/childTwo" name="ChildTwo" component={ChildTwo} /> 
     <Route path="/PageNavWithChildrenComponentInsideLayout/childThree" name="ChildThree" component={ChildThree} /> 
    </Route> 
    </Switch> 
    }