react路由基础学习

1、安装路由
引入 npm i react-router-dom@6||npm i react-router-dom@5分别是v6版本和v5版本
我这里以v6版本为主，react-router-dom自带react-router
在main.js使用BrowserRouter或者HashRouter包裹App，其中BrowserRouter和HashRouter分别对应vue的history模式和hash模式

//main.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

2、配置路由

//routerConfig.js

import { lazy, Suspense } from 'react'

import Layout from '@/pages/layout/index'; //布局容器

//懒加载引入组件
const Music = lazy(() => import('@/views/music/index.jsx'));
const Test = lazy(() => import('@/views/test/index.jsx'));
const MusicDetail1 = lazy(() => import('@/views/music/musicDetail1.jsx'));
const MusicDetail2 = lazy(() => import('@/views/music/musicDetail2.jsx'));

//懒加载路由
function LazyLoad(children) {
    return (
        <Suspense fallback={<div>loading...</div>}>
            {children}
        </Suspense>
    )
}

export const routers = [
    {
        path: '/',
        element: <Layout />,
        //路由嵌套，子路由的元素需使用<Outlet />
        children: [
            {
                path: '/music',
                element: LazyLoad(<Music />),
                children: [
                    {
                        index: true, //默认路由，path和index不能同时出现，v6版本不存在Redirect重定向，函数调用的重定向官方文档有（https://reactrouter.com/docs/en/v6/faq）。
                        element: LazyLoad(<MusicDetail1 />),
                    },
                    {
                        path: 'detail1',
                        element: LazyLoad(<MusicDetail1 />),
                    },
                    {
                        path: 'detail2[',](url)
                        element: LazyLoad(<MusicDetail2 />),
                    },
                ],
            },
            {
                path: '/test',
                element: LazyLoad(<Test />),
            },
        ],
    }
]

3、在App.jsx引入路由
useRoutes可以读取一个路由配置数组，生成相应的路由组件列表，类似以前的react-router-config插件的功能，那么路由统一管理的实现用这个api就简单多了。

//App.jsx

import './App.css';
import { routers } from './router/routerConfig.jsx';
import { useRoutes } from 'react-router-dom'


function App() {
  return useRoutes(routers)
}

export default App;

4、组件使用
Outlet用于嵌套路由的地方

import { useEffect } from 'react'
import { useLocation, useNavigate, Outlet } from 'react-router-dom'
import { Button } from 'antd';

function MusicIndex() {
    const location = useLocation();
    const navigate = useNavigate();
    useEffect(() => {
        console.log(location);
    })
    const handleNavigate = (path) => {
        navigate(path)
    }
    return (
        <div className="musicWrapper">
            <Button type="primary" onClick={() => handleNavigate('/music/detail1')}>详情1</Button>
            <Button type="primary" onClick={() => handleNavigate('/music/detail2')}>详情2</Button>
            <Outlet />
        </div>
    )
}
export default MusicIndex;