嵌套路由器-反应路由器和连接的反应路由器

时间：2019-06-09 06:24:29

标签： javascript reactjs react-router react-loadable connected-react-router

我正在尝试延迟加载路由定义，所以假设我有一个父应用程序：

const history = createBrowserHistory();
const store = createStore({ history });

const app = (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/" render={() => 'home'} />

        /** Nested LazyLoad Sub Application Profile **/
        <Route path="/profile" component={LazyProfile} />
        /** / Profile **/

        <Route component={NotFound} />
      </Switch>
    </ConnectedRouter>
  </Provider>
);

LazyProfile是可加载的组件，它会延迟注入整个概要文件部分：

// LazyProfile.jsx

export const LazyProfile = Loadable.Map({
  loader: {
    exports: () => import(/* webpackChunkName: 'profile' */ '@company/app-plugin-profile'),
  },
  loading: () => 'loading',
  render(result, props) {
    const { Component } = result.exports;

    return <Component />;
  },
});

和Profile是位于其他地方并通过npm安装的组件。它还会加载profile区域的所有子路线... 

// Profile.jsx

export const Profile = (props) => (
  <Fragment>
    <h1>Profile</h1>

    <Switch {...props}>
      <Route path="/profile/a" render={() => 'profile a'} />
      <Route path="/profile/b" render={() => 'profile b'} />
    </Switch>
  </Fragment>
);

此配置会导致以下错误，由于Profile组件实际上是作为路由器的子级安装的，因此我发现这很奇怪。

index.tsx:29 Uncaught Error: Invariant failed: You should not use <Switch> outside a <Router>
    at invariant (tiny-invariant.esm.js:11)
    at react-router.js:635
    at updateContextConsumer (react-dom.development.js:15484)
    at beginWork (react-dom.development.js:15672)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18578)
invariant @ tiny-invariant.esm.js:11
(anonymous) @ react-router.js:635
updateContextConsumer @ react-dom.development.js:15484
beginWork @ react-dom.development.js:15672
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18578
renderRoot @ react-dom.development.js:19468
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
enqueueSetState @ react-dom.development.js:11169
../../../../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
update @ index.js:205
(anonymous) @ index.js:215
Promise.then (async)
_loadModule @ index.js:214
componentWillMount @ index.js:168
callComponentWillMount @ react-dom.development.js:11421
mountClassInstance @ react-dom.development.js:11514
updateClassComponent @ react-dom.development.js:14688
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
scheduleRootUpdate @ react-dom.development.js:20572
updateContainerAtExpirationTime @ react-dom.development.js:20600
updateContainer @ react-dom.development.js:20657
../../../../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20953
(anonymous) @ react-dom.development.js:21090
unbatchedUpdates @ react-dom.development.js:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21086
render @ react-dom.development.js:21155
_callee$ @ index.tsx:29
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
./index.tsx @ index.tsx:11
__webpack_require__ @ bootstrap:63
0 @ application.js:77532
__webpack_require__ @ bootstrap:63
(anonymous) @ bootstrap:197
(anonymous) @ bootstrap:197
index.tsx:29 The above error occurred in the <Context.Consumer> component:
    in Switch (created by Component)
    in Component (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by Routes)
    in Switch (created by Routes)
    in Routes
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction
    in Provider
    in ApolloProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17117
logError @ react-dom.development.js:17153
update.callback @ react-dom.development.js:18065
callCallback @ react-dom.development.js:16433
commitUpdateEffects @ react-dom.development.js:16472
commitUpdateQueue @ react-dom.development.js:16463
commitLifeCycles @ react-dom.development.js:17383
commitAllLifeCycles @ react-dom.development.js:18736
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18948
(anonymous) @ react-dom.development.js:20418
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20417
performWorkOnRoot @ react-dom.development.js:20346
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
enqueueSetState @ react-dom.development.js:11169
../../../../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
update @ index.js:205
(anonymous) @ index.js:215
Promise.then (async)
_loadModule @ index.js:214
componentWillMount @ index.js:168
callComponentWillMount @ react-dom.development.js:11421
mountClassInstance @ react-dom.development.js:11514
updateClassComponent @ react-dom.development.js:14688
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
scheduleRootUpdate @ react-dom.development.js:20572
updateContainerAtExpirationTime @ react-dom.development.js:20600
updateContainer @ react-dom.development.js:20657
../../../../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20953
(anonymous) @ react-dom.development.js:21090
unbatchedUpdates @ react-dom.development.js:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21086
render @ react-dom.development.js:21155
_callee$ @ index.tsx:29
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
./index.tsx @ index.tsx:11
__webpack_require__ @ bootstrap:63
0 @ application.js:77532
__webpack_require__ @ bootstrap:63
(anonymous) @ bootstrap:197
(anonymous) @ bootstrap:197

，如果我在配置文件定义中加入BrowserRouter，一切都将正常工作

export const Profile = (props) => (
  <BrowserRouter {...props}>
    <Fragment>
      <h1>Profile</h1>

      <Switch {...props}>
        <Route path="/profile/a" render={() => 'profile a'} />
        <Route path="/profile/b" render={() => 'profile b'} />
      </Switch>
    </Fragment>
  </BrowserRouter>
);

对此我感到满意，但是我想知道嵌套two routers是否会导致不良后果...

0 个答案:

没有答案
相关问题
最新问题