首页 文章

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

提问于
浏览 次
1

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

我用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;

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

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

What I would like to do is

当用户启动应用程序时，应该将用户重定向到 /home ，我想为 App 组件定义两个额外的路由

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

目前，我无法在应用程序加载时重定向到 /home ，无法为 App Component定义嵌套路由 .

注意：以上代码适用于react-router版本3.x.要重定向页面加载，我会使用IndexRedirect .

我已经看了this和this问题，我在这些问题中尝试了所有可能的解决方案，但没有一个有效 .

I would like to have all the route handling in routes.js file .

javascript reactjs react-router react-router-v4

2 回答

  • 3

    您可以使用 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'));
    回复于
  • 1

    嘿我已经为一个简单的示例项目实现了 react-router-v4 . 这是 github link : How to Implement the react-router-v4 . 请仔细阅读 . 非常简单 .

    运行：克隆它并点击 npm install . 希望这对你有所帮助 .

    回复于

相关问题