React-router

import {
    HashRouter,
    BrowserRouter,
    Switch,
    Route
} from 'react-router-dom'
function RouterComponent () {
    return (
        <BrowserRouter>
            <Switch>
                <Route path='/' exact component={Home}>
                {/* 动态路由 */}
                <Route path='/detail/:id' exact component={Detail}></Route>
                {/* 匹配404等页面 */}
                <Route path='*' exact component={NotFound}></Route>
            </Switch>
        </BrowserRouter>
    )
}

路由配置懒加载

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
const Home = React.lazy(() => import('./pages/Home'))
const Detail = React.lazy(() => import('./pages/Detail'))
const App = () => (
    <BrowserRouter>
        <React.Suspense fallback={<div>Loading...</div>}>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/detail" component={Detail} />
            </Switch>
        </React.Suspense>
    </BrowserRouter>
)