react-router-dom

一：前期准备

页面 Home

import React from 'react'
const Home = () : React.FC => {
    return (
        <div>Home 页面</div>
    )
}
export default Home

页面 About

import React from 'react'
const About = () : React.FC => {
    return (
        <div>About 页面</div>
    )
}
export default About

页面 detail

import React from 'react'
const detail = () : React.FC => {
    return (
        <div>detail 页面</div>
    )
}
export default detail

二：v5 路由配置

1、基本使用

• src/router/App.tsx

  • exact：使用精准匹配
  • Switch：每次只会渲染一条路由
  • Redirect：重定向

  import { Router, Switch, BrowserRouter, Redirect } from 'react-router-dom';
  import Home from '@/views/Home/index'
  import About from '@/views/About/index'
  function App() {
      // 路由优先级，最上面优先级越高
      return (
          <div className="app">
              <BrowserRouter>
                   <Switch> 
                       <Route exact path="/" component={<Redirect to="/home" />} />
                       <Route exact path="/home" component={Home}  />
                       <Route path="/about" component={About} />
                       <Route path="/detail/:id" component={Detail}>
                       <Route render={() => <h1>404</h1>} />
                  </Switch>
              </BrowserRouter>
          </div>
      )
  }
  

2、获取路由信息

// localhost:3000/detail/12
import React from 'react'
import { RouteComponentProps } from 'react-router-dom'
interface MathParams {
    id: string
}
export const Detail : React.FC<RouteComponentProps<MathParams>> = (props) => {
    console.log(props.history);
    console.log(props.location);
    console.log(props.match);
    
    // 获取url参数
    console.log(props.match.pa