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>
	</>
}
相关推荐
Mr_Xuhhh26 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js