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