反応ルータ4つのネストされたコンポーネントが正しく動作しない

Question

反応ルータ3.xから4.xに切り替わりました。ネストされたルートをレンダリングできません。

は私が <div>Hello world App</div>と Appコンポーネントが完全にレンダリング <div>Hello world Home</div>

をレンダリングする簡単なdivタグがあるcreate-react-app

index.js file 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Routes from './routes'; 
import './index.css'; 

ReactDOM.render(<Routes />, document.getElementById('root')); 

routes.js file 

import React from 'react'; 
import _ from 'lodash'; 
import { 
    BrowserRouter as Router, 
    Route, 
} from 'react-router-dom'; 
import { dojoRequire } from 'esri-loader'; 
import EsriLoader from 'esri-loader-react'; 

import App from './components/App'; 
import Home from './components/Home'; 

/** 
* Helper component to wrap app 
*/ 
class AppWrapper extends React.Component { 
    /** 
    * Util function to render the children 
    * Whenever a state change happens in react application, react will render the component again 
    * and we wish to pass the updated state to the children as props 
    */ 
    renderChildren() { 
    const {children} = this.props; 
    if (!children) { 
     return; 
    } 

    return React.Children.map(children, c => React.cloneElement(c, _.omit(this.props, 'children'), { })); 
    } 

    render() { 
    const child = this.renderChildren(); 
    return (
     <App {...this.props}> 
     {child} 
     </App> 
    ); 
    } 
} 

/** 
* Root Loader component to load esri api 
*/ 
class LoaderComponent extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { loaded: false }; 
    } 

    /** 
    * Callback fired when arc GIS api is loaded 
    * Now load the requirejs modules using dojorequire 
    */ 
    esriReady() { 
    dojoRequire(['esri/Map', 'esri/views/MapView'], (Map, MapView) => { 
     this.setState({ Map, MapView, loaded: true }); 
    }); 
    } 

    render() { 
    const options = { 
     url: 'https://js.arcgis.com/4.3/', 
    }; 
    return (
     <div> 
     <EsriLoader options={options} ready={this.esriReady.bind(this)} /> 
     <AppWrapper {...this.state}> 
      <Route exact path="/home" component={Home} /> 
     </AppWrapper> 
     </div> 
    ); 
    } 
}; 

const Routes = (props) => (
    <Router {...props}> 
    <Route exact path="/" component={LoaderComponent} /> 
    </Router> 
); 

export default Routes; 

アプリケーションとホームのコンポーネントを使用してアプリケーションをブートストラップが、私はhttp://localhost:3000/homeコンポーネントにナビゲートするとき、私は見ます空のページ。私がやりたい何

は、ユーザが/homeにリダイレクトする必要があるアプリを立ち上げて、私はAppコンポーネント現在

<Route exact path="/a" component={A} /> 
<Route exact path="/b" component={B} /> 

ための2つの追加のルートを定義したいと思います

ですアプリの読み込みで/homeにリダイレクトできず、Appコンポーネントのネストされたルートを定義できません。

注：上記のコードは、反応ルータバージョン3.xで正常に動作していました。ページの読み込みにリダイレクトするには、IndexRedirectを使用します。

私はすでにthisとthis質問を見ていたし、私はこれらの質問にすべての可能な解決策を試したが、どれも作業していません。

すべてのルート処理をroutes.jsファイルにしたいと思います。

Answer 1

あなたはSwitchとRedirectでルーティングなどを実現できます。

import React from 'react'; 
import {Route, Switch, Redirect} from 'react-router-dom'; 

import {LoaderComponent, AppWrapper , Home, A, B} from './mycomponents'; 


const routes = (
    <LoaderComponent> 
    <AppWrapper> 
     <Switch> 
     <Route exact path='/' render={() => <Redirect to='/home' />} /> 
     <Route exact path='/home' component={Home} /> 
     <Route exact path='/a' component={A} /> 
     <Route exact path='/b' component={B} /> 
     </Switch> 
    </AppWrapper> 
    </LoaderComponent> 
); 

export default routes; 

そして、このようなroutes.jsファイルの何かを使用します。

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router} from 'react-router-dom'; 
import createHistory from 'history/createBrowserHistory'; 

import routes from './routes'; 


const history = createHistory(); 

const App =() => 
    <Router history={history}> 
    {routes} 
    </Router>; 

render(<App />, document.getElementById('root')); 

Answer 2

ねえ、私は、簡単なサンプルプロジェクトのために、react-router-v4を実施しているが。ここにgithubリンク：How to Implement the react-router-v4です。それを通過してください。非常に簡単です。

実行：クローンしてnpm installをクリックします。これがあなたに役立つことを願っています。