react-router-dom
简介
前端和路由打交道几乎是不可避免的,react下的路由包整合到了react-router-dom中,下载安装react-router-dom v6 就包含了路由操作的基本库类了.
安装
npm install react-router-dom@6
最简单的一个小例子
当使用命令npx create-react-app my-app
创建了一个前端的项目之后,首先引入react-router-dom
,使用<BrowserRouter>
包裹dom树的最外层,代码如下:
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'))
注册路由:
//index.js
{/* 注册路由 */}
<Routes>
<Route path="/about" element={<About/>} />
<Route path="/home" element={<Home/>} />
</Routes>
连接组件:
<NavLink to="/about">
About
</NavLink>
<NavLink to="/home">
Home
</NavLink>
用来跳转到指定页面,效果如下:
路由表和子路由
目前来说,比较方便成熟的做法是定义一个路由表,首先创建路由表,定义页面的路由,
src/routes/index.js
import HookHome from '../components/Hook-test'
import Home from '../components/Home'
import RouteHome, { HomePage, AboutPage,NewsPage,DetailPage } from '../components/Route-test'
const routes = [
{
path: '/',
element: <Home />
},
{
path: 'hook',
element: <HookHome />,
},
{
path: 'home',
element: <Home />
},
{
path: 'route',
element: <RouteHome />,
children: [
{
path: 'aboutpage',
element: <AboutPage />
},
{
path: 'newspage',
element: <NewsPage />,
children: [
{
path:'detail',
element: <DetailPage />
},
]
},
{
path: 'homepage',
element: <HomePage />
}
]
}
]
export default routes
路由表的好处是直观自然,修改方便,尤其是定义子路由更是直观了很多.
在app.js中引入定义好的路由表:
import { useRoutes } from "react-router-dom";
import routes from './routes'
const element = useRoutes(routes)
使用{element}展示组件页面,如果有自组件的话,使用展示子组件的页面.
路由传参
react router 路由传参有几种方法,我个人比较喜欢useLocation(),配合useNavigate()使用起来还是很方便的,
定义一个事件的方法:
const navigate = useNavigate()
function showDetail(item) {
navigate('detail', {
replace: false,
state: {
id: item.id,
title: item.title,
content: item.content
}
})
}
组件中渲染代码:
<div>
<h1>Welcome to news</h1>
<List sx={style} component="nav" aria-label="mailbox folders">
{
messages.map((item) => {
return (
<div>
<ListItem key={item.id} onClick={() => showDetail(item)} button>
<NavLink to="detail"
state={{
id: item.id,
title: item.title,
content: item.content
}} />
{item.title}查看详情
</ListItem>
<Divider />
</div>
)
})
}
</List>
{/* 指定路由组件的展示位置 */}
<Outlet />
</div>
接收组件的代码:
function DetailPage() {
const { state } = useLocation()
const id = state.id;
const title = state.title;
const content = state.content;
return (
<ul>
<li>id:{id}</li>
<li>title:{title}</li>
<li>content:{content}</li>
</ul>
)
}
对于一些简单的数据传递这些足够了,当然需求复杂的可以看看一些其他的api,官方都有接收,csdn里也能搜到的.至此react的路由简单案例就到这里吧.