react18路由使用

步骤

1.首先在项目中安装

# 使用 npm 安装
npm install react-router-dom

# 使用 yarn 安装
yarn add react-router-dom

2.添加基本的目录结构，src/router/index.js

import { createBrowserRouter } from 'react-router-dom'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import AuthRoute from '@/components/AuthRoute'
import {Suspense, lazy} from 'react'

// 路由懒加载
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))

const router = createBrowserRouter([
    {
        path: '/',
        element: <AuthRoute><Layout /></AuthRoute>,
        children: [
            {
                index: true,
                element: <Suspense fallback={'loading'}><Home /></Suspense>
            },
            {
                path: '/article/:id',
                element: <Suspense fallback={'loading'}><Article /></Suspense>
            },
            {
                path: '/publish',
                element: <Suspense fallback={'loading'}><Publish /></Suspense>
            }
        ]
    },
    {
        path: '/login',
        element: <Login />
    }
])

export default router

// AuthRoute.js 路由权限组件
// const { getToken } = require("@/utils")
// const { Navigate } = require("react-router-dom")

// const AuthRoute = ({ children }) => {
//     const token = getToken()
//     if (token) {
//         return <>{children}</>
//     } else {
//         return <Navigate to={'/login'} replace />
//     }
// }

// export default AuthRoute

3.入口文件配置 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom'
import router from './router'
import { Provider } from 'react-redux'
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  // </React.StrictMode>
);

4.路由传参方式

// 动态参数传递
import { Link, useSearchParams, useParams } from 'react-router-dom'
<Link to="/article/18"></Link>
const { id } = useParams()

// ------------------------
// query参数传递
<Link to="/article?id=18"></Link>
const [ searchParams ] = useSearchParams()
const articleId = searchParams.get('id')