React基础之ReactRouter
React基础之ReactRouter
一个路径path对于一个组件component，当我们在浏览器中访问一个path的时候，path对于的组件会在页面中渲染
npm i react-router-dom
抽象路由模块
在src下创建一个router目录，创建一个index.js入口文件
import
Login
from
“../page/Login”
;
import
Article
from
“../page/Article”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
const
router
=
createBrowserRouter
([
{
path:
‘/login’
,
element:
<
Login
/>
},
{
path:
‘/article’
,
element:
<
Article
/>
}
])
export default
router
page下创建不同的组件文件夹
Article下的index.js与Login下的index.js差不多
const
Login
=()
=>
{
return
<
div
我是登录页
</
div
}
export default
Login
然后再src下的index.js入口文件中，使用该路由
import
React
from
‘react’
;
import
ReactDOM
from
‘react-dom/client’
;
import
‘./index.css’
;
import
reportWebVitals
from
‘./reportWebVitals’
;
import
{
RouterProvider
}
from
‘react-router-dom’
;
//导入路由组件
import router from ’./router’ ;
const
root
=
ReactDOM
.
createRoot
(
document
.
getElementById
(
‘root’
));
root
.
render
(
< React.StrictMode >
< RouterProvider router = { router } ></ RouterProvider >
</ React.StrictMode >
);
reportWebVitals
();
路由导航
由一个组件跳转到另外一个组件
1.声明式导航
import
{
Link
}
from
“react-router-dom”
const
Login
=()
=>
{
return
(
<
div
我是登录页
< Link to = "/article" > 跳转到文章页 </ Link >
</
div
)
}
export default
Login
2.编程式导航
调用useNavigate钩子得到导航方法，通过调用方法以命令式的形式进行路由跳转
import
{
useNavigate
}
from
“react-router-dom”
const
Login
=()
=>
{
const
navigate
=
useNavigate
()
return
(
<
div
我是登录页
<
button
onClick
=
{
()
=>
navigate
(
‘/article’
)
}
跳转到文章页
</
button
</
div
)
}
export default
Login
路由传参
方法1.saerchParams传参
传入参数
import
{
useNavigate
}
from
“react-router-dom”
const
Login
=()
=>
{
const
navigate
=
useNavigate
()
return
(
<
div
我是登录页
<
button
onClick
=
{
()
=>
navigate
(
‘/article’
)
}
跳转到文章页
</
button
< button onClick = { () => navigate ( ’/article?id=1001&name=jack’ ) } > searchParams 传参 </ button >
</
div
)
}
export default
Login
接收参数
import
{
useSearchParams
}
from
“react-router-dom”
const
Article
=()
=>
{
const [ params ]= useSearchParams ()
const id = params . get ( ‘id’ )
const name = params . get ( ’name’ )
return
<
div
我是文章页
,
{
id
}
,
{
name
}
</
div
}
export default
Article
方法2 params传参
注意：需要在路由配置中设置对应的参数映射
传入参数
import
{
useNavigate
}
from
“react-router-dom”
const
Login
=()
=>
{
const
navigate
=
useNavigate
()
return
(
<
div
我是登录页
<
button
onClick
=
{
()
=>
navigate
(
‘/article’
)
}
跳转到文章页
</
button
< button onClick = { () => navigate ( ’/article/1001/jack’ ) } > params 传参 </ button >
</
div
)
}
export default
Login
路由中配置映射
import
Login
from
“../page/Login”
;
import
Article
from
“../page/Article”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
const
router
=
createBrowserRouter
([
{
path:
‘/login’
,
element:
<
Login
/>
},
{
path:
‘/article/:id/:name’
,
element:
<
Article
/>
}
])
export default
router
接收参数
import
{
useParams
,
useSearchParams
}
from
“react-router-dom”
const
Article
=()
=>
{
const params = useParams ()
const id = params . id
const name = params . name
return < div > 我是文章页 , { id } , { name } </ div >
}
export default
Article
路由嵌套
1.在路由配置中配置配置一级路由与它的Children
import
Login
from
“../page/Login”
;
import
Article
from
“../page/Article”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
import
Layout
from
“../page/Layout”
;
import
Board
from
“../page/Board”
;
import
About
from
“../page/About”
;
const
router
=
createBrowserRouter
([
{
path: ’/’ ,
element: < Layout /> ,
children: [
{
path: ‘board’ ,
element: < Board />
},
{
path: ‘about’ ,
element: < About />
}
]
},
])
export default
router
2.在一级路由处，配置二级路由出口
import
{
Link
,
Outlet
}
from
“react-router-dom”
const
Layout
=()
=>
{
return
(
<
div
我是一级路由Layout
<
Link
to
=
“/board”
面板
</
Link
<
Link
to
=
“about”
关于
</
Link
{
/*
配置二级路由出口
*/
}
<
Outlet
/>
</
div
)
}
export default
Layout
默认二级路由配置
也就是已进入到这个一级路由，就会显示这个二级路由的渲染，但是路径不发生变化
index的路由配置为
import
Login
from
“../page/Login”
;
import
Article
from
“../page/Article”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
import
Layout
from
“../page/Layout”
;
import
Board
from
“../page/Board”
;
import
About
from
“../page/About”
;
const
router
=
createBrowserRouter
([
{
path:
‘/’
,
element:
<
Layout
/>
,
children:
[
{
//
默认二级路由设置
index: true ,
element:
<
Board
/>
},
{
path:
‘about’
,
element:
<
About
/>
}
]
}])
export default
router
一级路由Layout为
import
{
Link
,
Outlet
}
from
“react-router-dom”
const
Layout
=()
=>
{
return
(
<
div
我是一级路由Layout
< Link to = "/" > 面板 </ Link >
<
Link
to
=
“about”
关于
</
Link
{
/*
配置二级路由出口
*/
}
<
Outlet
/>
</
div
)
}
export default
Layout
404 路由配置
浏览器中的url路径在整个路由配置中找不到，我们就可以配置404兜底路由
1.设置一个NotFound组件
const
NotFount
=()
=>
{
return
(
<
div
页面消失了
</
div
)
}
export default
NotFount
2.在路由配置中添加path为*的路由配置项
import
Login
from
“../page/Login”
;
import
Article
from
“../page/Article”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
import
NotFount
from
“../page/NotFound”
;
const
router
=
createBrowserRouter
([
{
path:
‘*’
,
element:
<
NotFount
/>
}
])
export default
router
两种路由模式
也有history与hash两种模式
只需要将之前使用的 createBrowserRouter 修改成
createHashRouter
import
Login
from
“../page/Login”
;
import
Article
from
“../page/Article”
;
import
{
createBrowserRouter
,
createHashRouter
}
from
“react-router-dom”
;
import
Layout
from
“../page/Layout”
;
import
Board
from
“../page/Board”
;
import
About
from
“../page/About”
;
import
NotFount
from
“../page/NotFound”
;
const
router
= createHashRouter
([
{
path:
‘/’
,
element:
<
Layout
/>
,
children:
[
{
//
默认二级路由设置
index:
true
,
element:
<
Board
/>
},
{
path:
‘about’
,
element:
<
About
/>
}
]
},
{
path:
‘/login’
,
element:
<
Login
/>
},
{
path:
‘/article/:id/:name’
,
element:
<
Article
/>
},
{
path:
‘*’
,
element:
<
NotFount
/>
}
])
export default
router
