【React Router】路由快速上手

1. 创建路由开发环境

# 使用CRA创建项目
npm create-react-app react-router-pro

# 安装最新的ReactRouter包
npm i react-router-dom

2. 快速开始

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>登录</div>
  },
  {
    path: '/article',
    element: <div>文章</div>
  }
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

3. 抽象路由模块

// @/page/Article/index.js
const Article = () => {
  return <div>文章页</div>
}

export default Article

// @/router/index.js
import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login></Login>
  },
  {
    path: '/article',
    element: <Article></Article>
  },
  {
    path: '/',
    element: <Login></Login>
  }
])

export default router

// @/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {  RouterProvider } from 'react-router-dom';
// 导入路由
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 路由绑定 */}
    <RouterProvider router={router} />
  </React.StrictMode>
);

4. 常用方法或者组件

useNavigate ：useNavigate

const navigate = useNavigate();
const navigateTo = () => {
    // navigate('/card', {
    //     replace: true,
    //     state: {
    //         // name: '123'
    //     }
    // })
    navigate(-1)
}

LInk：

<ul>
   <li>
       <Link to={"/card"}>card</Link>
   </li>
   <li>
       <Link to={"/manage/userManage/2"}>manage</Link>
   </li>
   <li>
       <button onClick={navigateTo}>返回</button>
   </li>
</ul>

路径参数和查询参数：

// const params = useSearchParams();
const params = useParams()
console.log(params)