React router

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

基本使用

  1. 安装react-router-dom
    npm install react-router-dom
    
  2. 创建路由表
    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组件用于创建路由导航
    import {Link} from 'react-router-dom'
    const App = ()=>{
    	return <>
    		<Link to="/home">Home</Link>
    	</>
    }
    
  4. 在index.js中引入router
    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属性

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组件设置组件在父组件中显示的位置。

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

设置默认路由

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

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属性为空字符串

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

路由传参

params参数

  1. 声明参数
    params参数需要在配置路由时声明参数名作为占位符,当跳转路由的时候传递参数
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. 传递参数
<Link to="/home/1"></Link>
  1. 接收参数
    在组件中使用useParams()接收参数
import {Outlet,useParams} from 'react-router-dom';
const Home = ()=>{
const params = useParams();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
		<Outlert></Outlet>
	</>
}

search 参数

  1. 传递参数
<Link to="/home?id=1"></Link>
  1. 接收参数
    在组件中使用useSearchParams()接收参数
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. 传递参数
import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate=  useNavigate();
	const redirectPage=()=>{
		navigate('home',{
			replace:false,
			state:{}
		});
	}
	return <>
		<button onClick={redirectPage}>跳转</button>
	</>
}
  1. 接收参数
    在组件中通过useLocation()获取参数
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表示新跳转的路由会重新生成一个历史记录,历史记录会增加。

import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate=  useNavigate();
navigate('home',{
	replace:false,
	state:{}
});
	return <>
		<button onClick={redirectPage}>跳转</button>
	</>
}
  • 21
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端御书房

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值