react函数式组件路由使用流程

 后台管理系统中，登录页和菜单页就需要用到一级路由

类式组件一级路由写法

import React, {Component} from 'react'
import {BrowserRouter, Route, Switch} from 'react-router-dom'

import Login from './pages/login/login'
import Admin from './pages/admin/admin'

/*
应用的根组件
 */
export default class App extends Component {


  render () {
    return (
      <BrowserRouter>
        <Switch> {/*只匹配其中一个*/}
          <Route path='/login' component={Login}></Route>
          <Route path='/' component={Admin}></Route>
        </Switch>
      </BrowserRouter>
    )
  }
}

函数式组件一级路由写法

import React from 'react'
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import Login from './pages/Login'
import Admin from './pages/Admin'
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/admin' element={<Admin/>} />
        <Route path='/login' element={<Login/>} />
        <Route path='/' element={<Admin/>} />
      </Routes>
    </BrowserRouter>
  )
}

经过对比发现函数式组件与类式组件的区别：

·类式组件中的Switch换成了函数式组件Routes

·类式组件中Route的component属性换成了函数组件中的element

 函数式组件的编程式路由导航

import {useNavigate} from 'react-router-dom'

const navigate=useNavigate()
  const login=()=>{
    navigate('/',{replace:true})
  }

相较于类式的写法，需要使用useNavigate