一：前期准备

页面 Home

import React from 'react'
const Home = () : React.FC => {
    return (
        
Home 页面
    )
}
export default Home
1
2
3
4
5
6
7

页面 About

import React from 'react'
const About = () : React.FC => {
    return (
        
About 页面
    )
}
export default About
1
2
3
4
5
6
7

页面 detail

import React from 'react'
const detail = () : React.FC => {
    return (
        
detail 页面
    )
}
export default detail
1
2
3
4
5
6
7

二：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 (
          
  
              
                    
                       } />
                       
                       
                       
                        
  404
  } />
                  
              
          
      )
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

2、获取路由信息

// localhost:3000/detail/12
import React from 'react'
import { RouteComponentProps } from 'react-router-dom'
interface MathParams {
    id: string
}
export const Detail : React.FC> = (props) => {
    console.log(props.history);
    console.log(props.location);
    console.log(props.match);
    
    // 获取url参数
    console.log(props.match.pa
1
2
3
4
5
6
7
8
9
10
11
12