module化react-router中的路由

IT技术 reactjs react-router
2021-05-26 20:04:48

react-router 有没有办法module化你的路由，然后导入它们并组装它们？

所以而不是这个：

  <Router>
    <Route path="/" component={App}>
      <Route path="inbox" component={Inbox}>
        <Route path="messages/" component={AllMessages} />
        <Route path="messages/:id" component={Message} />
      </Route>
      <Route path="calendar" component={Calendar}>
        <Route path="year" component={Year}>
          <Route path="month" component={Month}>
            <Route path="week" component={Week}/>
          </Route>
        </Route>
      </Route>
    </Route>
  </Router>

你可以这样做：

let InboxRoutes = React.createClass({
  render: function(){
    return (
      <Route path="inbox" component={Inbox}>
        <Route path="messages/" component={AllMessages} />
        <Route path="messages/:id" component={Message} />
      </Route>
    );
  }
});

<Router>
    <Route path="/" component={App}>
      <InboxRoutes/>
      <CalendarRoutes/>
    </Route>
  </Router>

我得到： Warning: Location did not match any routes

3个回答

一种解决方案是将它们包装在变量中：

let InboxRoutes = (
    <Route path="inbox" component={Inbox}>
        <Route path="messages/" component={AllMessages} />
        <Route path="messages/:id" component={Message} />
    </Route>
)

let CalendarRoutes = (/* define routes like above */)

let routes = (
    <Router>
        <Route path="/" component={App}>
            {InboxRoutes}
            {CalendarRoutes}
        </Route>
    </Router>
)

render(routes, document.getElementById("app"))

注意：记得要放入父路由的render方法 {this.props.children}

如果你想按需加载你的路由，你可以使用 Webpack 自动加载。

这是完整的指南：React Router 的自动代码拆分

总而言之，您可以使用 getter 函数设置路由，这些函数会在需要时自动加载块。

import App from 'containers/App';
function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
  return (module) => cb(null, module.default);
}
export default {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: 'blog',
      getComponent(location, cb) {
        System.import('pages/Blog')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    }
  ]
};

是的，你可以，但它有点 hacky - 由于 react router v3 的 hacky 性质。请参阅我对类似问题的回答：

React-router 导入路由

其它你可能感兴趣的问题
上一篇无法安装渐进式 Web 应用站点：没有可显示的图标 下一篇如何从另一个页面调用 useState？