React-Rourer-Dom v6学习笔记

这块说句实在话，学起来真的是恶心，官方从之前的v5~v6过渡做了非常大的改动，所以造成了晚上的资料基本都是老的，但是对于新的一些资料都是比较浅的，给我这种小白学习业主造成了很大的难度。本身对于前端知识就是模棱两可，现在到更好，完全断了。所以没办法了，只能自己学习一些就做一些笔记了。

创建路由文件

可以在src下创建Router文件夹，类似如下。

import App from '../App'
import Home from '../pages/Home'
import List from '../pages/List'
import Detail from '../pages/Detail'
// 引入路由组件
// BrowserRouter 相当于v5路由模式里面的history模式，可以让url不带#
// HashRouter 相当于v5里面的hash模式，url带#
// Routes == Switch
// 所有的Route组件都必须包含在Routes中
import {BrowserRouter,Routes,Route} from 'react-router-dom'


// 写一个组件

const MyRouter =()=> {
    return (
        <BrowserRouter>
        <Routes>
            <Route path='/' element={<App />} />
            <Route index element={<Home />} /> //默认定义为首页
            <Route path='list/:id' element={<List />} />
            <Route path='list/' element={<List />} />
            <Route path='detail' element={<Detail />} />
        </Routes>
    </BrowserRouter>
    )
}

export default MyRouter


/*
<Route path='list/:id' element={<List />} /> 
list/:id 代表路径后面还会传id
// 由于v6 暂时不支持类组件挂载获取参数，需要使用函数式组件获取
import { useParams } from "react-router-dom";

export default function List() {

    const {id:sid} = useParams()
    return (
        <div>
            <h2>列表页 {sid}</h2>
        </div>
    );
}


<Route path='detail?id=1234' element={<Detail />} />

export default function Detail() {
    const [params] = useSearchParams();
    console.log(params.getAll("id")); // 需要携带参数告知需要获取的数据
    let myId = params.getAll("id")[0]
    return (
        <div>
            <h2>详情页 - {myId} </h2>
        </div>
    );

*/

引入路由

在index.js文件中可以做如下改动，类似由路由来判断要去的页面，然后在渲染对应的页面。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 引入路由文件
import MyRouter from './router'


ReactDOM.render(<MyRouter />,
  document.getElementById('root')
);