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>
	</>
}
相关推荐
qq_390161772 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543230 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test32 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome