简述

　　路由的本质就是在一个页面上，通过交互，不刷新页面但能改变页面视图的一种方法。

　　react-router就是一个扩展react从而实现路由的第三方库

　　router实例在线演示：https://scrimba.com/scrim/cNq8MzCr

单页面应用

　　单页面应用是指整个系统的前端只有一个页面，跳转到别的页面是通过切换页面上组件的形式进行跳转，在加载页面时一般会将所有组件的数据进行加载，所以在切换的时候不需要刷新，用户体验也会更好

安装依赖

　　通过npm进行依赖安装

npm install react-router-dom

基本使用

　　在你的index.js中，引入BrowserRouter, Route, Switch等路由相关资源

import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from "react-router-dom"

　　用BrowserRouter把你的App组件包裹起来

<BrowserRouter>
    <App />
</BrowserRouter>

　　在app组件中添加Switch标签，他的作用是让页面每次只渲染一个组件

　　然后在Switch标签里即可添加Router标签，一个Router即定义了一个路由关系，path和组件相对应，如果在后面加了exact则表示只有完全匹配才会跳转，switch标签的意思是从头到尾发现有一个匹配上的router就中断了

　　其中没有path的路由是处理错误的路由，用于专门展示错误信息

function App() {
    return (
        <main>
            <Navbar />
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

　　设置完这一步，我们就可以通过浏览器的URl进行组件的切换

　　若想使用按钮、链接等方式进行组件切换的交互，可以使用Link标签把一些触发切换的元素包裹住，这样就能进行路由切换了

在路由中传递参数

　　在Route标签中的path属性中，url使用/:参数名的方式进行书写，例如：

<Route path="/about/:name" component={About} />

　　在对应组件中，我们就可以通过 props.match.params.参数名 的方式接受到路由传递过来的参数

　　也可以使用下面说到的 useParams 进行参数的获取

router hooks

　　Router hooks 可以让我们更加容易地访问到 history,location,路由参数 等等

　　hooks可以在 https://reactrouter.com/en/main/start/overview 进行查阅，这里列出比较详细的几种

useHistory

　　返回windows.history

import { useHistory } from "react-router-dom";

const Contact = () => {
  const history = useHistory();
  return (
    <Fragment>
      <h1>Contact</h1>
      <button onClick={() => history.push("/")}>Go to home</button>
    </Fragment>
  );
};

useParams

　　返回上面说的参数，代码和上方类似

useLocation

　　返回当前 URL 的 location 对象，代码和上方类似

References

　　https://www.freecodecamp.org/chinese/news/react-router-in-5-minutes/

　　https://juejin.cn/post/6948226424427773983

今天的文章react 路由详解分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。