React 路由基本使用

本文主要介绍React Router 6的一些基本用法

声明式导航

主要借助 Link 完成跳转

import { Link, Outlet } from 'react-router-dom'


<Link to="/" style={{ paddingRight: '15px' }}>
  首页
</Link>

编程式导航

通过 useNavigate 完成

需要注意的是，const navigate = useNavigate()必须写在函数组件顶部，且不适用class组件

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

export default function Home() {
  // 编程式导航
  const navigate = useNavigate()
  const gotoList = () => {
    navigate('/list/1?name=123', {
      state: {
        url: 'hello',
        params: { a: 1 }
      }
    })
  }
  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={gotoList}>to list 1</button>
    </div>
  )
}

路由配置

import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter, Routes, Route } from 'react-router-dom'

import App from './App'

import Home from './page/home'
import List from './page/list'
import ListItem from './page/list-item'
import About from './page/about'
import NotFound from './page/404'
import Login from './page/login'

// 使用history模式 -》BrowserRouter
// 使用hash模式 -》 HashRouter
// 使用native -》 NativeRouter
ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<App />}>
        <Route index element={<Home />}></Route>
        <Route path='list' element={<List />}>
          <Route path=':id' element={<ListItem />}></Route>
        </Route>
        <Route path='about' element={<About />}></Route>
        <Route path='login' element={<Login />}></Route>
      </Route>
      <Route path='*' element={<NotFound />}></Route>
    </Routes>
  </BrowserRouter >,
  document.getElementById('root')
)

子路由组件的处理

这里借助 Outlet 实现

import { Link, Outlet } from 'react-router-dom'
import './App.css'

function App() {
  return (
    <div>
      <h1>router 6 demo</h1>
      <nav>
        <Link to="/" style={{ paddingRight: '15px' }}>
          首页
        </Link>
        <Link to="/list" style={{ paddingRight: '15px' }}>
          列表
        </Link>
        <Link to="/about" style={{ paddingRight: '15px' }}>
          关于
        </Link>
        <Link to="/login">登陆</Link>
      </nav>
      <Outlet></Outlet>
    </div>
  )
}

export default App