代码之家 › 专栏 › 技术社区 › Adam Jenkins

反应路由器惰性组件

lazy-loading react-router reactjs

Adam Jenkins · 技术社区 · 5 年前

所以这是可行的:

import Page from 'components/Page';
...

render() {
   return (
     <Route render={props => <Page {...props}/>}/>
   );
}

但这并不是:

import React, { lazy } from 'react';
const Cmp = lazy(() => import('components/Page'));
...

render() {
   return (
     <Route render={props => <Cmp {...props}/>}/>
   );
}

反应16.8.6 React路由器5.0.0

我明白了:

The above error occurred in one of your React components:
    in Unknown (at configured.route.js:41)
    in Route (at configured.route.js:41)
    in ConfiguredRoute (created by Context.Consumer)
    ...rest of stack trace

1 回复 | 直到 3 年前

John Ruddell 5 年前

参考 React Docs on code splitting Suspense 以明确的方式 fallback 所以,当组件未加载时,您可以使用一些东西来代替组件进行渲染。

// Direct paste from https://reactjs.org/docs/code-splitting.html

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

悬念应该是故事的母体 <Route> lazy

Adrian Guerrero 3 年前

我更新了react的版本,这个错误开始出现,因为我忘记了更新react dom包的版本,一旦我更新了,一切都正常了。

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

2 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

2 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

2 年前

Ancross · 链接未路由到组件

2 年前