class App extends Component {
render() {
return (
<div>
<Header />
<Tab />
<Switch>
{/*配置默认路由*/}
<Route
exact
path="/"
render={() => <Redirect to="/recommend" />}
/>
<Route path="/recommend" component={Recommend}/>
<Route path="/rank" component={Rank}/>
<Route path="/search" component={Search}/>
<Route path="/singer" component={Singer}/>
</Switch>
<Route path="/user" component={UserCenter}/>
<Player/>
</div>
);
}
}
export default App;
import Loadable from 'react-loadable';
import Loading from 'reuse/loading/Loading'
const Rank = Loadable({
loader: () => import('components/rank/Rank'),
loading: () => <Loading text={"按需加载"}/>
})
const Search = Loadable({
loader: () => import('components/search/Search'),
loading: () => <Loading text={"按需加载"}/>
})
const Singer = Loadable({
loader: () => import('components/singer/Singer'),
loading: () => <Loading text={"按需加载"}/>
})
const UserCenter = Loadable({
loader: () => import('components/user-center/UserCenter'),
loading: () => <Loading text={"按需加载"}/>
})
上面代码是实现按需加载的代码,按需加载成功,但是webstorm依旧标红,并且将: import Loadable from ‘react-loadable’;以下的代码放到class App之前根本无法编译成功,总是提示语法错误,在app中render处少一个“}”。求大佬解答。
项目源码地址