前提:本篇文件主要描述的是router6在函数式组件中的使用
1.router6的使用
下载
npm install react-router-dom
index.js文件
// 从 react-dom/client 引入 ReactDOM
import ReactDOM from 'react-dom/client'
//引入BrowserRouter
import { BrowserRouter } from 'react-router-dom'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
)
除了<BrowserRouter>
还有<HashRouter>
,两者的区别如下:
1.底层原理不同:
BrowserRouter使用的是H5的history API
HashRouter使用的是URL的哈希值
2.path的表现形式不同
BrowserRouter的路径中没有#,例如localhost:3000/add
HashRouter的路径包含#,例如localhost:3000/#/add
3.刷新后对路由state参数的影响
BrowserRoute没有任何影响,因为state保存在history对象中
HashRouter刷新后导致路由state参数的丢失
创建路由的方式
1.路由的基本使用
import { NavLink, Routes, Route, Navigate } from 'react-router-dom'
import About from './components/About.jsx'
import Home from './components/home.jsx'
import Children from "../components/children.jsx"
export default function App() {
return (
<div>
<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<Routes>
<Route path="/home" element={<Home />}>
{/*嵌套路由(子路由)*/}
<Route path="/about" element={<About />}></Route>
</Route>
<Route path="/about" element={<About />}></Route>
<Route path="/" element={<Navigate to="/home" />}></Route>
</Routes>
</div>
)
}
<Navigate>
:只要 <Navigate>
组件被渲染,就会修改路径,切换视图。可用于路由重定向,设置进入页面默认跳转的路由页面。
2.创建路由表
// 路由表
// routes/index.js
import { Navigate } from 'react-router-dom'
import About from '../components/About.jsx'
import Home from '../components/home.jsx'
import Children from "../components/children.jsx"
import
const routes = [
//路由重定向
{
path: '/',
element: <Navigate to="/home" />,
},
{
path: '/home',
element: <Home />,
//创建子路由
children:[
{
path:"children",
element:<Children/>
}
]
},
{
path: '/about',
element: <About/>,
},
]
export default routes
在 App.jsx中挂载路由
//App.jsx
import { NavLink,useRoutes} from 'react-router-dom'
import About from './components/About.jsx'
import Home from './components/home.jsx'
//引入路由表
import routes from './router';
export default function App() {
//生成路由规则
const route=useRoutes(routes);
return (
<div>
<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<div className="content">
//在要显示路由页面的地方挂载路由
{route}
</div>
</div>
)
}
嵌套路由(子路由)
import React, { Fragment } from 'react'
import { NavLink,Outlet} from 'react-router-dom'
export default function Home() {
return (
<Fragment>
<NavLink to="/home/children">children</NavLink>
<Outlet/>
</Fragment>
)
}
<Outlet>
:设置子路由的出口,即在何处渲染子路由
2.路由传参
传递params参数
注册路由时声明params
{
path: '/about /:id',
element: <About/>,
},
传递参数
<NavLink to={`/about/children/${id}>children</NavLink>
使用useParms()接收参数
import React from 'react'
import { useParams} from 'react-router-dom'
export default function Children() {
const {id}=useParams();
return (
<div>About:{id}</div>
)
}
传递search参数
注册
{
path: '/about',
element: <About/>,
},
传递参数
<NavLink to={`/about/children?id=${id}&message=${message}`}>children</NavLink>
使用 useSearchParams()
接收参数。该方法返回一个包含两个元素的数组:search
参数和修改 search
参数的方法。
import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function Children() {
const [searchParams,setSearchParms]=useSearchParams();
//获取相对应的值
const id=searchParams.get('id');
const message=searchParams.get('message');
function change() {
setSearchParams('id=2&message=ccc')
}
return (
<div>About
{id}:{message}
<button onClick={change}>Change search params</button>
</div>
)
}
传递state参数
注册
{
path: '/about',
element: <About/>,
},
传递参数
<NavLink to="/about/children" state={{id:id,message:message}}>children</NavLink>
使用 useLocation()
接收参数。该方法返回路由组件的 location
对象
import React from 'react'
import { useParams} from 'react-router-dom'
export default function Children() {
const {
state: { id,message },
} = useLocation();
return (
<div>{id}:{message}</div>
)
}
useLocation()包含内容如下图
3.路由跳转
方式一
<NavLink to="/home">Home</NavLink>
方式二:useNavigate()
import React, { Fragment } from 'react'
import { NavLink,Outlet,useNavigate} from 'react-router-dom'
export default function Home() {
const navigate=useNavigate();
const linkTo=()=>{
navigate("/home/children",{
replace:false,
state:{
id:id,
message:message
}
})
}
const back=()=>{
//后退
navigate(1);
//前进
//navigate(-1);
}
return (
<Fragment>
<Button onClick={linkTo}>children</Button>
<Button onClick={back}>children</Button>
<Outlet/>
</Fragment>
)
}
useNavigate()
返回一个函数,调用该函数实现编程式路由导航。函数有两种参数传递方式。
第一种方式传递两个参数:路由和相关参数。参数只能设置 replace
和 state
。想要传递 params
和 search
参数直接在路由带上。
第二种方式传递数字,代表前进或后退几步。