Javascript react路由器4嵌套组件工作不正常

我正在从react router 3.x切换到4.x，无法渲染嵌套路由

我使用

当前，我无法在应用程序加载时重定向到

/home

，也无法为

app

组件定义嵌套路由

注意：上面的代码在react路由器3.x版上运行良好。要在页面加载时重定向，我将使用

IndexRedirect

我已经看了一眼并提出了一个问题，我尝试了所有可能的解决方案，但都没有奏效

---

我希望在

routes.js

文件中处理所有路由

您可以使用

开关

和

重定向

实现此类路由：

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;

---

您可以使用

开关

和

重定向

实现这种路由：

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;

---

嘿，我已经为一个简单的示例项目实现了

react-router-v4

。这是github的链接：。请检查一下。很简单

---

要运行：克隆它并点击

npm安装

。希望这将对您有所帮助。

嘿，我已经为一个简单的示例项目实现了

react-router-v4

。这是github的链接：。请检查一下。很简单

---

要运行：克隆它并点击

npm安装

。希望这将对您有所帮助。

您错过了

装载机组件。它是必需的，因为我必须加载一些外部api。所有3个组件，Home、A、B都应该遵循层次结构<代码>加载组件->应用程序->主页/A/B

我用层次结构更新了我的答案。由于react-router-4中的所有内容都是一个组件，因此您可以在任何地方定义路由，而不仅仅是在1个文件（

routes.js

）中定义路由，如果这不是您可以组织代码的结构。您错过了

LoaderComponent

。它是必需的，因为我必须加载一些外部api。所有3个组件，Home、A、B都应该遵循层次结构<代码>加载组件->应用程序->主页/A/B我用层次结构更新了我的答案。由于react-router-4中的所有内容都是一个组件，因此您可以在任何地方定义路由，而不仅仅是在1个文件（

routes.js

）中定义路由，如果这不是您可以组织代码的结构。

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;

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'));