我如何将 react-loadable 与 react-router 一起使用?
How can I use react-loadable with react-router?
我正在尝试实现一个包含 10-15 页的应用程序。这适用于 react-router,但我应该使用 react-loadable 来产生 Spinner 和加载效果 ...
但是如何在 loadable 中导入路由器组件?
我应该为每个组件创建一个常量变量吗?
像这样:
const Home = Loadable({
loader: () => import('./Home'),
loading: Loading,
});
const News = Loadable({
loader: () => import('./News'),
loading: Loading,
});
const Gallery = Loadable({
loader: () => import('./Gallery'),
loading: Loading,
});
class App extends React.Component {
render() {
return (
<Router>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/gallery" component={Gallery} />
</Router>
)
}
}
或者其他技巧也可以吗?
这有点棘手。你不需要使用 react-loadable.
演示 here.
如果您想为图像和其他组件制作加载程序直到它们成为 onLoad
,您可以使用 react-content-loader 来创建骨架屏幕(参见演示中的 components/Image.js
)。它可以使 "almost" 成为完美的装载机。到目前为止,这是我能做的。我不知道要为 css 检测 onLoad
:(
您可以创建一个名为 routes.js
的新文件,其中包含所有页面。
- /src
-- /pages
--- Gallery.js
--- Home.js
--- News.js
--- withBase.js
-- App.js
-- routes.js
routes.js
import Home from './pages/Home';
import Gallery from './pages/Gallery';
import News from './pages/News';
// Add as much as you want...
export default [
{
path: '/',
component: Home,
},
{
path: '/gallery',
component: Gallery,
},
{
path: '/news',
component: News,
},
];
您需要创建一个高阶组件来包装每个页面。
withBase.js (HOC)
import React from "react";
export default WrappedComponent =>
class extends React.Component {
state = {
isLoading: true
};
componentDidMount() {
this.hideLoader();
}
hideLoader = () => {
// This is for demo purpose
const proc = new Promise(resolve => {
setTimeout(() => resolve(), 3000);
});
proc.then(() => this.setState({ isLoading: false }));
};
render() {
return (
<div>
{this.state.isLoading ? <p>Loading...</p> : <WrappedComponent />}
</div>
);
}
};
用法:例如export default withBase(Home)
.
然后,在App.js
中循环路由。
<Switch>
{routes.map(route => (
<Route
exact
key={route.path}
path={route.path}
component={route.component}
/>
))}
</Switch>
我正在尝试实现一个包含 10-15 页的应用程序。这适用于 react-router,但我应该使用 react-loadable 来产生 Spinner 和加载效果 ...
但是如何在 loadable 中导入路由器组件?
我应该为每个组件创建一个常量变量吗?
像这样:
const Home = Loadable({
loader: () => import('./Home'),
loading: Loading,
});
const News = Loadable({
loader: () => import('./News'),
loading: Loading,
});
const Gallery = Loadable({
loader: () => import('./Gallery'),
loading: Loading,
});
class App extends React.Component {
render() {
return (
<Router>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/gallery" component={Gallery} />
</Router>
)
}
}
或者其他技巧也可以吗?
这有点棘手。你不需要使用 react-loadable.
演示 here.
如果您想为图像和其他组件制作加载程序直到它们成为 onLoad
,您可以使用 react-content-loader 来创建骨架屏幕(参见演示中的 components/Image.js
)。它可以使 "almost" 成为完美的装载机。到目前为止,这是我能做的。我不知道要为 css 检测 onLoad
:(
您可以创建一个名为 routes.js
的新文件,其中包含所有页面。
- /src
-- /pages
--- Gallery.js
--- Home.js
--- News.js
--- withBase.js
-- App.js
-- routes.js
routes.js
import Home from './pages/Home';
import Gallery from './pages/Gallery';
import News from './pages/News';
// Add as much as you want...
export default [
{
path: '/',
component: Home,
},
{
path: '/gallery',
component: Gallery,
},
{
path: '/news',
component: News,
},
];
您需要创建一个高阶组件来包装每个页面。
withBase.js (HOC)
import React from "react";
export default WrappedComponent =>
class extends React.Component {
state = {
isLoading: true
};
componentDidMount() {
this.hideLoader();
}
hideLoader = () => {
// This is for demo purpose
const proc = new Promise(resolve => {
setTimeout(() => resolve(), 3000);
});
proc.then(() => this.setState({ isLoading: false }));
};
render() {
return (
<div>
{this.state.isLoading ? <p>Loading...</p> : <WrappedComponent />}
</div>
);
}
};
用法:例如export default withBase(Home)
.
然后,在App.js
中循环路由。
<Switch>
{routes.map(route => (
<Route
exact
key={route.path}
path={route.path}
component={route.component}
/>
))}
</Switch>