React:Router路由

ReactRouter引入

在index.js里编辑，创建路由，绑定路由

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
//1、创建router实例对象并配置路由对应关系
const router=createBrowserRouter([{
  path: '/login',
  element:<div>我是登录页</div>
},{path: '/article',
  element: <div>我是文章页</div>}])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* { 2、路由绑定} */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

reportWebVitals();

效果是这样，可以输入路径进入对应页面

ReactRouter抽象路由模块

按照普通开发的流程使用Router，创建page文件夹，在文件夹内部创建Login和Article文件夹，在两个文件夹内部各自创建index.js文件

在 React 项目中，通常已经配置好了 Babel 和 Webpack，因此开发者可以直接在 JS 文件中使用 JSX，而无需额外配置。

然后配置路径和组件的对应关系，创建路由文件夹，在里面创建index.js文件

javascript 复制代码

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([
    { path: '/login',
        element: <Login/>
    }, {
       path: '/article',
       element: <Article/>
  }
])
export default router

然后在index.js里引入

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
//1、引入router
import router from './router';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 2、将router传入RouterProvider */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

reportWebVitals();

这个page在view里通常叫views

路由导航

比如登录页面，在登录以后就会拿着登录的用户信息传递给下一个路由，打开新页面

有两种方式实现路由导航，一种叫声明式导航，一种叫编程式导航

这是声明式

在Login路由里调用Link组件

javascript 复制代码

import {Link} from 'react-router-dom'
const Login = () => {
    return <div>
        我是登录页
        <Link to='/article'>点我跳转至文章页</Link>
    </div>
}
export default Login

Link被识别为a链接

这是编程式

点击a链接即可跳转到Article页面

绑定点击事件，调用方法进行路由跳转

javascript 复制代码

import { useNavigate } from "react-router-dom"
const Article = () => {
    const navigate=useNavigate()
    return <div>
        我是文章页
        <button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button>
    </div>
}
export default Article

在路由里传参

两种写法

searchParams传参

把参数以url字符串的格式传入

XML 复制代码

协议://域名/路径?查询参数#哈希

javascript 复制代码

import { useNavigate } from "react-router-dom"
const Article = () => {
    const navigate=useNavigate()
    return <div>
        我是文章页
        <button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button>
        <button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button>
    </div>
}
export default Article

获取传递过来的参数params.get()

javascript 复制代码

import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
const Login = () => {
    const [params] = useSearchParams()
    const id = params.get('id')
    const name = params.get('name')
    return <div>
        我是登录页
        <Link to='/article'>点我跳转至文章页id:{id},name:{name}</Link>
    </div>
}
export default Login

params传参

在路由配置的path里加上【:id】加上动态参数才知道你获取的是什么

动态参数（即占位符）

javascript 复制代码

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([
    { path: '/login/:id',//动态路由,通过useParams获取
        element: <Login/>
    }, {
       path: '/article',
       element: <Article/>
  }
])
export default router

然后在Article路由处直接传递参数101，

javascript 复制代码

import { useNavigate, useParams } from "react-router-dom"
const Article = () => {
    const navigate = useNavigate()
    return <div>
        我是文章页
        <button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button>
        <button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button>
        <button onClick={()=>{navigate('/login/101')}}>Params传参</button>
    </div>
}
export default Article

在Login页面显示：

javascript 复制代码

import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {useParams } from 'react-router-dom'
const Login = () => {
    const params = useParams()
    const id = params.id
    return <div>
        我是登录页
        <Link to='/article'>点我跳转至文章页id:{id}</Link>
        <div>{id}</div>
    </div>
}
export default Login

如果传递多个数据，可以在url后面接着写：

javascript 复制代码

//Article
import { useNavigate, useParams } from "react-router-dom"
const Article = () => {
    const navigate = useNavigate()
    return <div>
        我是文章页
        <button onClick={()=>{navigate('/login')}}>跳转至登陆界面</button>
        <button onClick={()=>{navigate('/login?id=101&name=jack')}}>searchParams传参</button>
        <button onClick={()=>{navigate('/login/101/jack')}}>Params传参</button>
    </div>
}
export default Article

javascript 复制代码

//Login
import { Link } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
import {useParams } from 'react-router-dom'
const Login = () => {
    const params = useParams()
    const id = params.id
    const name = params.name
    return <div>
        我是登录页
        <Link to='/article'>点我跳转至文章页</Link>
        <div>id:{id}name:{name}</div>
    </div>
}
export default Login

javascript 复制代码

//Router
import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
const router=createBrowserRouter([
    { path: '/login/:id/:name',//动态路由,通过useParams获取
        element: <Login/>
    }, {
       path: '/article',
       element: <Article/>
  }
])
export default router

嵌套路由配置

在嵌套路由中，父级路由就像一个文件夹，子级路由就像文件夹里的文件。要在父级路由中正确显示子级路由的内容，就需要使用<Outlet/>作为二级路由的出口。

在page下创建一个新文件夹充当一级路由：

javascript 复制代码

//layout/index.js
import { Link ,Outlet} from 'react-router-dom'
const Layout = ({}) => { 
    return (
        <div>
            我是一级路由layout组件
        <Link to='/about'>点我跳转至About页</Link>   
        <Link to='/board'>点我跳转至Board页</Link>   
            {/* {配置子路由，也就是二级路由的出口} */}
            <Outlet/>
       </div>
    )
}
export default Layout

然后再创建两个同级的路由：

javascript 复制代码

//Board
const Board=()  => { 
    return (
       <div>
            我是面板
       </div>
    )
} 
export default Board
//About
const About=()  => { 
    return (
       <div>
            我是一级路由About组件
       </div>
    )
} 
export default About

然后配置路由和路径：

javascript 复制代码

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

默认二级路由

默认二级路由就是设置你默认打开展示的路由，设置路由去掉path，设置index为true

javascript 复制代码

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
import Layout  from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [
        //设置默认路由
            {index:true,
            element: <Board/>}
        ,{
            path:'about',
            element:<About/>
        }
        ], 
    }
])
export default router

对layout设置

javascript 复制代码

import { Link ,Outlet} from 'react-router-dom'
const Layout = ({}) => { 
    return (
        <div>
            我是一级路由layout组件
        <Link to='/about'>点我跳转至About页</Link>   
        <Link to='/'>点我跳转至Board页</Link>   
            {/* {配置子路由，也就是二级路由的出口} */}
            <Outlet/>
       </div>
    )
}
export default Layout

打开localhost:3000，展示的是二级路由Board

404路由配置

优化用户体验，当浏览器输入的url在整个路由配置中都找不到path，为了用户体验，可以使用404兜底组件进行渲染

编写NotFound路由，创建NotFound文件夹，在里面的index.js编写👇

javascript 复制代码

const NotFound = () => {
    return <div>页面被老鼠吃掉了</div>
}
export default NotFound

在路由路径配置处输入【*】，意思是除了已有的路由，之外的任何值都会跳转到404NotFound页面

javascript 复制代码

import Login from "../page/Login";
import Article from "../page/Article";
import { BrowserRouter, createBrowserRouter } from "react-router-dom";
import Layout  from "../page/Layout";
import About from "../page/About";
import Board from "../page/Board";
import NotFound from "../page/NotFound";
const router = createBrowserRouter([
    {
        path: '*',
        element:<NotFound/>
    }
    
])
export default router

React:Router路由

ReactRouter引入

ReactRouter抽象路由模块

路由导航

这是声明式

这是编程式

在路由里传参

searchParams传参

params传参

嵌套路由配置

默认二级路由

404路由配置

两种路由模式