React-router 的使用

知识点

• 路由模 式（hash，H5 history），同 vue-router
• 路由配置（动态路由，懒加载），同 vue-router

路由模式

• hash 模式（默认），如：http://abc.com/#/user/10
• H5 history 模式，如 http://abc.com/user/20
• 后者需要 server 端支持，因此无特殊需求可选择前者

如 nginx 配置

location / {
  try_files $uri $uri/ /index.html;
}

例子

import React from "react";
// hash 模式
import {HashRouter as Router,Switch,Route} from "react-router-dom";
// H5 history 模式
// import {BrowserRouter as Router,Switch,Route} from "react-router-dom";

function RouterComponent() {
  return (
    <Router>
      <Switch>
        {/*首页*/}
        <Route exact path="/">
          <Home />
        </Route>
        {/*动态路由*/}
        <Route path="/project/:id">
          <Project />
        </Route>
        {/*默认路由*/}
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Router>
  )
}

路由配置

动态路由

import {Link, useParams} from "react-router-dom";

function Project() {
  // 获取 url 参数 如：'project/100'
  const {id} = useParams()
  console.log('id', id)

  return (
    <div>
      <Link to="/">首页</Link>
    </div>
  )
}

懒加载

import React, {Suspense, lazy} from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

const Home = lazy(() => import('./routes/Home'))
const About = lazy(() => import('./routes/About'))
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}></Route>
        <Route path="/about" component={About}></Route>
      </Switch>
    </Suspense>
  </Router>
)