day4 React路由

day4

React路由 (几乎和vue一模一样)

安装最新的ReactRouter包

npm i react-router-dom

import React from "react";
import ReactDOM from "react-dom/client";
import{
    createBrowserRouter,
    RouterProvider,
}from "react-router-dom";
import "./index.css";
​
const router = createBrowserRouter([
{
    path:"/",
    element:<div>Hello world</div>
}
])
ReactDOM.createRoot{document.getElementById("root")}.render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

实际开发

page/Login Article

// src/page/Article/index.js
const Article = ()=>{
    return <div>我是文章</div>
}
export default Article

// src/page/Login/index.js
​
const Login = ()=>{
    return <div>我是文章</div>
}
export default Login

router

// src/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/>
    },{
        path:'article',
        element:<Article/>
    },
])
​
export default router

应用入口文件渲染RouterProvider

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
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>
    {/* 2. 路由绑定 */}
      <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
)
​
reportWebVitals()

路由导航

声明式导航

声明式导航是指通过在模板中<Link>组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

import {Link} from "react-router-dom";
​
const Login = () => {
    return (
        <div>
            我是登陆页面
            <Link to='/article'>跳转到文章页面</Link>
        </div>
    )
}
export default Login

编程式导航

编程式导航是指通过useNavigate狗子得到导航方法，然后通过调用方法以命令式的新式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活

import {useNavigate} from "react-router-dom";
​
const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            我是登陆页面
            <button onClick={()=>navigate('/article')}></button>
        </div>
    )
}
export default Login

路由导航传参

searchParams传参

// login/index.js
import {useNavigate} from "react-router-dom";
​
const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            我是登陆页面
            <button onClick={()=>navigate('/article?id=1001&name=jack')}>跳转到文章页</button>
 
        </div>
    )
}
export default Login
​
​
// Article/index.js
import {useSearchParams} from "react-router-dom";
​
const Article = ()=>{
    const [params] = useSearchParams()
    const id = params.get('id')
    const name = params.get('name')
​
    return <div>我是文章{id}-{name}</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/>
    },{
        path:'article?id=1001&name=jack',
        element:<Article/>
    },
])
​
export default router

params传参

// Article/index.js
import {useParams} from "react-router-dom";
​
const Article = ()=>{
    const params = useParams()
    const id = params.id
    const name = params.name
    return <div>我是文章{id}-{name}</div>
​
}
export default Article
​
// Login/index.js
import {useNavigate} from "react-router-dom";
​
const Login = () => {
    const navigate = useNavigate()
    return (
        <div>
            我是登陆页面
            <button onClick={()=>navigate('/article/10086/jack')}>跳转到文章页</button>
        </div>
    )
}
export default Login
​
// 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/>
    },{
        path:'article/:id/:name',
        element:<Article/>
    },
])
​
export default router

嵌套路由配置

1. 使用children属性配置路由嵌套关系
2. 使用<Outlet>组件配置二级路由渲染位置

//一级路由 src/page/Layout/index.js
​
import {Link, Outlet} from "react-router-dom";
​
const Layout = () => {
​
    return (
        <div>我是一级路由Layout
            <Link to='/board/'>面板</Link>
            <Link to='/about/'>关于</Link>
            {/* 二级路由出口 */}
            <Outlet/>
        </div>
​
    )
}
export default Layout

//二级路由 src/page/About/index.js
​
const About = ()=>{
​
    return (
        <div>我是二级路由About</div>
    )
}
export default About

//二级路由 src/page/Board/index.js
​
const Board = ()=>{
​
    return (
        <div>我是二级路由Board</div>
    )
}
export default Board

// src/router/index.js
import {createBrowserRouter} from "react-router-dom";
import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";
const router = createBrowserRouter([
    {
      path:'/',
      element:<Layout/>,
        children:[
            {
                path:'board',
                element:<Board/>
            },
            {
                path:'about',
                element:<About/>
            },
        ]
    },
])
​
export default router

默认二级路由

去掉默认二级路由的path，改为index:ture

{
  path:'/',
  element:<Layout/>,
    children:[
        {
            index:true,
            element:<Board/>
        },
        {
            path:'about',
            element:<About/>
        },
    ]
},

404路由配置

添加src/NotFound/index.js页面

const NotFound = ()=>{
​
    return (
        <div>this is NotFound</div>
    )
}
export default NotFound

在router/index.js中配置

{
    path:'*',
    element:<NotFound/>
}