下面我将为您详细讲解"react-router JS 控制路由跳转实例"的攻略步骤。
步骤一:安装react-router
在项目中安装react-router-dom
依赖包,react-router-dom
是基于React
的DOM
封装,提供了一些跟浏览器url
地址相关的组件。
npm install react-router-dom --save
步骤二:基本使用方式
1. 路由定义
Route:用于路由匹配的组件,包含三个属性path、component、exact,分别表示路径、组件、是否精确匹配。例如:
import React from 'react'
import { Route } from 'react-router-dom'
import Home from './pages/home'
import About from './pages/about'
export default function () {
return (
<>
<Route path="/" exact component={Home}/>
<Route path="/about" component={About}/>
</>
)
}
2. 路由导航
Link:用于路由跳转的组件,点击后会跳转到指定路径。
import React from 'react'
import { Link } from 'react-router-dom'
export default function () {
return (
<>
<Link to="/">返回首页</Link>
<Link to="/about">跳转到关于页</Link>
</>
)
}
3. 路由跳转
history:路由历史对象,提供了一些方法来进行路由跳转。
- push(path, [state]):跳转到指定路径,并将 state 对象传递给目标路由组件。
```jsx
import React from 'react'
export default function ({ history }) {
function handleClick () {
history.push('/about', { from: 'Home' })
}
return (
<>
<button onClick={handleClick}>跳转到关于页并传参</button>
)
}
```
- replace(path, [state]):替换当前路径,并将 state 对象传递给目标路由组件。
```jsx
import React from 'react'
export default function ({ history }) {
function handleClick () {
history.replace('/about', { from: 'Home' })
}
return (
<>
<button onClick={handleClick}>跳转到关于页并传参(替换路由)</button>
)
}
```
步骤三:示例演示
下面通过两个示例说明路由跳转:
1. 直接跳转到指定页面
import React from 'react'
import { Route, Switch, Link, useHistory } from 'react-router-dom'
import Home from './pages/home'
import About from './pages/about'
export default function () {
return (
<>
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Switch>
</>
)
}
2. 编程式导航并传递参数
import React from 'react'
import { useHistory } from 'react-router-dom'
export default function () {
const history = useHistory()
function handleClick () {
history.push('/about', { name: 'Jack' })
}
return (
<>
<button onClick={handleClick}>导航到关于页</button>
</>
)
}
这样就完成了跳转到关于页面,并且传递了一个name参数。
总结一下:
react-router
是一款专门为单页面应用程序开发设计的路由组件,支持浏览器端以及服务端渲染(SSR)。在使用的过程中我们只需在导航中定义好所需的路由和组件,然后使用内置的API或者钩子函数实现路由的跳转以及参数的传递即可。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:react-router JS 控制路由跳转实例 - Python技术站