环球时报今日的新闻_b2b品牌榜前十名_兰州网站开发公司_百度收录是什么意思

快速开始

1. 创建项目并安装所有依赖

   npx create-react-app react-router-pro
   

2. 安装最新的reactrouter包

   npm i react-router-dom
   

3. 启动项目

   npm run start
   

搭建路由（index.js)

//index.js项目的入口 从这里开始运行//react必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目的根组件
import App from './App';import {createBrowserRouter,RouterProvider} from 'react-router-dom'//路由配置
const router = createBrowserRouter([   {path:'/login',element: <div>我是登录页</div>},{path:'/article',element: <div>我是文档页</div>},
])
//把app根组件渲染到id为root的节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>/* 路由绑定 */}<RouterProvider router={router}></RouterProvider></React.StrictMode>);

抽象路由模块

创建两个文件夹 page和router

page文件夹下的login文件夹下的login.js（article同理）

const Login = () =>{return <div>我是登录页</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',element:<Article />},
])
export default router

应用入口文件index.js渲染RouterProvider

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {RouterProvider} from 'react-router-dom'//导入路由router
import router from './router'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 路由绑定 */}<RouterProvider router={router}></RouterProvider></React.StrictMode>);

路由导航跳转

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数通信

声明式导航

通过在模版中通过’‘’'组件描述出要跳转到哪里去，常用在点击菜单的跳转操作

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"
import { Link } from 'react-router-dom'
const Login = () =>{const navigate = useNavigate()return (<div>我是登录页<button onClick={() => navigate('/article?id=1001&name=Jack')}>serachparams传参跳转到文章页面</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

params传参

login文件夹下的index.js

import { useNavigate } from "react-router-dom"
import { Link } from 'react-router-dom'
const Login = () =>{const navigate = useNavigate()return (<div>我是登录页<Link to="/article">跳转到文章页</Link><button onClick={() => navigate('/article/1001/jack')}>Params传参跳转到文章页面</button></div>)
}
export default Login

修改路由router文件夹下的index.js

    {path:'/article/:id/:name',  //在对应的router位置拼接参数占位符element:<Article />}

article文件夹下的index.js(接收参数)

import { useParams } from "react-router-dom"
const Article = () =>{const params = useParams()const id = params.idconst name = params.namereturn <div>我是文章页{id}-{name}</div>
}
export default Article

嵌套路由

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由为二级路由

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

router文件夹下的index.js

import Layout from "../page/Layout";
import Login from "../page/Login";
import Article from "../page/Article";
import About from "../page/About";
import Board from "../page/Board";
import { createBrowserRouter } from "react-router-dom";
//配置
const router = createBrowserRouter([{path:'/',            //一级路由element:<Layout />,children: [           //二级路由{path:'board',element:<Board />},{path:'about',element:<About />}]},{path:'/login',element:<Login />},{path:'/article/:id',element:<Article />},])
export default router

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

默认二级路由配置

当访问的一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true

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

404路由配置

当浏览器找不到对应的path，为了用户体验，可以使用404兜底组件进行渲染

1. 准备一个NotFound组件
2. 在路由表数组的末尾，以*号作为路由path配置路由

const NotFound = () =>{return <div>页面跑到月球了 </div>
}
export default NotFound

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

两种路由模式

history 模式 和 hash模式

ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建

路由模式	URL表现	底层原理	是否需要后端支持
history	url/login	history对象+pushState事件	需要
hash	url/#/login	监听hashChange事件	不需要

import { createBrowserRouter ,createHashRouter} from "react-router-dom";