Question

我从react-router 3.x切换到4.x，我无法呈现嵌套路由。

启动了一个应用程序

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;

应用和家庭组件是简单的div标签，可呈现<div>Hello world App</div>和<div>Hello world Home</div>

App组件呈现完美，但当我导航到http://localhost:3000/home组件时，我看到一个空页。

我想做的是

当用户启动应用时，应将用户重定向到/home，我想为App组件

定义另外两条路线

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

目前，我无法在应用加载时重定向到/home，也无法为App组件定义嵌套路由。

注意：上面的代码适用于react-router版本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。希望这对你有所帮助。

反应路由器4嵌套组件无法正常工作

2 个答案: