无法使用 switch 语句渲染路由 React router dom 5.0.0答案

【问题标题】：Can't render route with switch statements React router dom 5.0.0无法使用 switch 语句渲染路由 React router dom 5.0.0
【发布时间】：2019-10-17 13:54:02
【问题描述】：

我对 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'));

我做错了吗？

【问题讨论】：

标签： reactjs react-router lazy-loading react-router-dom react-suspense

【解决方案1】：

Suspense 元素应该在你的 switch 块之外，像这样：

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>
);

Example

【讨论】：