我是React Router的新手。我正在使用React-router-dom 5.0.0
由于某些原因,我的仪表板路线不匹配,导航到/dashboard
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from './theme';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
const MarketPlace = React.lazy(() => import('./marketplace/MarketPlace'));
const Dashboard = React.lazy(() => import('./dashboard/Dashboard'));
const mainApp = (
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
<Redirect exact from="/" to="/marketplace" />
<Suspense fallback="Loading...">
<Route component={MarketPlace} exact path="/marketplace" />
</Suspense>
<Suspense fallback="Loading...">
<Route component={Dashboard} exact path="/dashboard" />
</Suspense>
</Switch>
</BrowserRouter>
</MuiThemeProvider>
);
ReactDOM.render(mainApp, document.getElementById('root'));
我做错了什么吗?
答案 0 :(得分:0)
Suspense
元素应位于切换块之外,如下所示:
const App: React.FC = (props) => (
<BrowserRouter>
<React.Suspense fallback="Loading...">
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route path="/other" component={Other} />
<Redirect to="/dashboard" />
</Switch>
</React.Suspense>
</BrowserRouter>
);