react-router JS 控制路由跳转实例

下面我将为您详细讲解react-router JS 控制路由跳转实例的攻略步骤。

下面我将为您详细讲解"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或者钩子函数实现路由的跳转以及参数的传递即可。