React router

react-rouer-dom是在react项目中使用的路由管理工具。它主要的作用是把路由与对应的组件建立映射,当我们访问一个路由时,就渲染对应的组件。

基本使用

  1. 安装react-router-dom

    shell 复制代码
    npm install react-router-dom
  2. 创建路由表

    js 复制代码
    import {createBrowserRouter}from 'react-router-dom';
    import App from '../App';
    import Home from '../pages/Home'
    export default createBrowserRouter([{
    	path:'/',
    	element:<App />
    },{
    	path:'/home',
    	element:<Home/>
    }]);
  3. 创建路由导航
    react-router-dom提供Link组件用于创建路由导航

    js 复制代码
    import {Link} from 'react-router-dom'
    const App = ()=>{
    	return <>
    		<Link to="/home">Home</Link>
    	</>
    }
  4. 在index.js中引入router

    js 复制代码
    import {RouterProvider} from 'react-router-dom'
    import router from './router';
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
    	<BrowserRouter>
    		<RouterProvider route={router}></RouterProvider>
    	</BrowserRouter>
    );

路由嵌套

在父路由的下面再创建子路由,需要在父路由设置children属性

js 复制代码
import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home';
import Article from '../pages/Article'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home',
	element:<Home/>,
	children:[{
		path:'article',
		element:<Article/>
	}]
}]);

这样嵌套路由就声明完毕,为了当我们访问子路由时能够显示组件我们应当使用Outlet组件设置组件在父组件中显示的位置。

js 复制代码
import {Outlet} from 'react-router-dom';
const Home = ()=>{
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
		<Outlert></Outlet>
	</>
}

设置默认路由

为了当我们访问父路由能够直接显示默认的子路由,我们可以设置index属性为true

js 复制代码
import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home';
import Article from '../pages/Article'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home',
	element:<Home/>,
	children:[{
		index:true,
		element:<Article/>
	}]
}]);

这样当我们访问/home时就能直接显示Article组件,为了当我们点击路由导航仍能跳到article组件,需要设置link的to属性为空字符串

js 复制代码
import {Outlet} from 'react-router-dom';
const Home = ()=>{
	return <>
	<span>Home</span>
	<Link to="">Articcle</Link>
		<Outlert></Outlet>
	</>
}

路由传参

params参数

  1. 声明参数
    params参数需要在配置路由时声明参数名作为占位符,当跳转路由的时候传递参数
js 复制代码
import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home';
import Article from '../pages/Article'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home/:id',
	element:<Home/>,
	children:[{
		path:'article',
		element:<Article/>
	}]
}]);
  1. 传递参数
js 复制代码
<Link to="/home/1"></Link>
  1. 接收参数
    在组件中使用useParams()接收参数
js 复制代码
import {Outlet,useParams} from 'react-router-dom';
const Home = ()=>{
const params = useParams();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
		<Outlert></Outlet>
	</>
}
  1. 传递参数
js 复制代码
<Link to="/home?id=1"></Link>
  1. 接收参数
    在组件中使用useSearchParams()接收参数
js 复制代码
import {Outlet,useSearchParams} from 'react-router-dom';
const Home = ()=>{
const params = useSearchParams();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
	<Outlert></Outlet>
	</>
}

state传参

state传参是在通过调用navigate跳转路由时传递一个state属性即可。

  1. 传递参数
js 复制代码
import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate=  useNavigate();
navigate('home',{
	replace:false,
	state:{}
});
	return <>
		<button onClick={redirectPage}>跳转</button>
	</>
}
  1. 接收参数
    在组件中通过useLocation()获取参数
js 复制代码
import {Outlet,useLocation} from 'react-router-dom';
const Home = ()=>{
const params = useLocation();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
	<Outlert></Outlet>
	</>
}

编程式导航

编程式导航使用useNavigate()以js的方式控路由的跳转而不是通过Link组件创建的链接跳转路由。
useNavigate()函数返回一个函数,接收一个要跳转的路由,以及一个配置对象。配置对象有一个replace参数,replace如果为true表示路由跳转replace模式,跳转的路由会替换当前路由,历史记录的数量不会增加。如果为false表示新跳转的路由会重新生成一个历史记录,历史记录会增加。

js 复制代码
import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate=  useNavigate();
navigate('home',{
	replace:false,
	state:{}
});
	return <>
		<button onClick={redirectPage}>跳转</button>
	</>
}
相关推荐
xjt_09013 分钟前
浅析Web存储系统
前端
foxhuli22941 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript