react-router V6

安装插件

npm i react-router-dom

定义路由

import Home from '../views/home'
import Invoices from '../views/Invoices'
import Invoice from '../views/Invoices/Invoice/Invoice.jsx'
import SentInvoices from '../views/SentInvoices'
import {useRoutes,BrowserRouter,Router,Roure} from 'react-router-dom'
function Routers() {
    let element = useRoutes([
        // 一级路由
        { path: '/', element: <Home /> },
        { path: 'invoices',
         element: <Invoices />,
         // 二级路由 children
         children: [
             { path: ':id', element: <Invoice /> },
             // index : true 设置为默认路由 /invoices 下默认显示当前内容
             { index:true , element: <SentInvoices /> } //  path: 'sent' 二级路由path不带/ /invoices/sent
         ]
        },
        // 重定向
        { path: 'home', redirectTo: '/' },
        // 404找不到
        { path: '*', element: <NotFound /> }
    ])
    return element ;
}
export default Routers;

注册路由

import './App.css';
// 引入定义好的路由规则
import Routers from './router'
import { BrowserRouter as Router, Link } from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          {/* link 会渲染为a标签 to 代表路由要指向的页面  */}
          <li><Link to="/">首页</Link></li>
          <li><Link to="/invoices">用户管理</Link></li>
          <li><Link to="/invoices/1">关于</Link></li>
        </ul>
        {/* 在 BrowserRouter 的内部 使用路由规则*/}
        <Routers />
      </Router>
    </div>
  );
}
export default App;

二级路由出口设置

上文字 <Invoices />组件下存在下一级的路由

// 导入二级路由的出口
import {  Outlet } from 'react-router-dom' 
function Invoices() {
    return ( <div className="">
    Invoices
    {/* 设置出口位置 */}
    <Outlet/>
    </div> );
}
export default Invoices;

编程式跳转

// 导入模块
import {useNavigate} from 'react-router-dom';
function SentInvoices() {
    // 调用得到navgate对象
    const navgate = useNavigate()
    const handleclick = ()=>{
        // 路由跳转
          navgate('/')
      }
    return ( <div>
    SentInvoices+
    <button onClick={handleclick}>asa</button>
    </div> );
}
export default SentInvoices;