react-rouer-dom是在react项目中使用的路由管理工具。它主要的作用是把路由与对应的组件建立映射,当我们访问一个路由时,就渲染对应的组件。
基本使用
-
安装react-router-dom
shellnpm install react-router-dom
-
创建路由表
jsimport {createBrowserRouter}from 'react-router-dom'; import App from '../App'; import Home from '../pages/Home' export default createBrowserRouter([{ path:'/', element:<App /> },{ path:'/home', element:<Home/> }]);
-
创建路由导航
react-router-dom提供Link组件用于创建路由导航jsimport {Link} from 'react-router-dom' const App = ()=>{ return <> <Link to="/home">Home</Link> </> }
-
在index.js中引入router
jsimport {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参数
- 声明参数
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/>
}]
}]);
- 传递参数
js
<Link to="/home/1"></Link>
- 接收参数
在组件中使用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>
</>
}
search 参数
- 传递参数
js
<Link to="/home?id=1"></Link>
- 接收参数
在组件中使用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属性即可。
- 传递参数
js
import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate= useNavigate();
navigate('home',{
replace:false,
state:{}
});
return <>
<button onClick={redirectPage}>跳转</button>
</>
}
- 接收参数
在组件中通过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>
</>
}