正在进入ing...

React-Rourer-Dom v6学习笔记

发布时间:2022-01-19 浏览量: 439 文章分类: 前端相关

这块说句实在话,学起来真的是恶心,官方从之前的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')
);