面试官：说说你对React Router的理解？常用的Router组件有哪些？

- 日理万妓 2022-08-31 00:56 248阅读 0赞

![daf23e31f11d9996821ecaa32bb03bed.png][]

## 一、是什么 ##

`react-router`等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面

路由的本质就是页面的`URL`发生改变时，页面的显示结果可以根据`URL`的变化而变化，但是页面不会刷新

因此，可以通过前端路由可以实现单页(SPA)应用

`react-router`主要分成了几个不同的包：

*  react-router: 实现了路由的核心功能
 *  react-router-dom：基于 react-router，加入了在浏览器运行环境下的一些功能
 *  react-router-native：基于 react-router，加入了 react-native 运行环境下的一些功能
 *  react-router-config: 用于配置静态路由的工具库

## 二、有哪些 ##

这里主要讲述的是`react-router-dom`的常用`API`，主要是提供了一些组件：

*  BrowserRouter、HashRouter
 *  Route
 *  Link、NavLink
 *  switch
 *  redirect

### BrowserRouter、HashRouter ###

`Router`中包含了对路径改变的监听，并且会将相应的路径传递给子组件

`BrowserRouter`是`history`模式，`HashRouter`模式

使用两者作为最顶层组件包裹其他组件

import { BrowserRouter as Router } from "react-router-dom";
    
    export default function App() {
      return (
        <Router>
          <main>
            <nav>
              <ul>
                <li>
                  <a href="/">Home</a>
                </li>
                <li>
                  <a href="/about">About</a>
                </li>
                <li>
                  <a href="/contact">Contact</a>
                </li>
              </ul>
            </nav>
          </main>
        </Router>
      );
    }

### Route ###

`Route`用于路径的匹配，然后进行组件的渲染，对应的属性如下：

*  path 属性：用于设置匹配到的路径
 *  component 属性：设置匹配到路径后，渲染的组件
 *  render 属性：设置匹配到路径后，渲染的内容
 *  exact 属性：开启精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件

import { BrowserRouter as Router, Route } from "react-router-dom";
    
    export default function App() {
      return (
        <Router>
          <main>
            <nav>
              <ul>
                <li>
                  <a href="/">Home</a>
                </li>
                <li>
                  <a href="/about">About</a>
                </li>
                <li>
                  <a href="/contact">Contact</a>
                </li>
              </ul>
            </nav>
            <Route path="/" render={() => <h1>Welcome!</h1>} />
          </main>
        </Router>
      );
    }

### Link、NavLink ###

通常路径的跳转是使用`Link`组件，最终会被渲染成`a`元素，其中属性`to`代替`a`标题的`href`属性

`NavLink`是在`Link`基础之上增加了一些样式属性，例如组件被选中时，发生样式变化，则可以设置`NavLink`的以下属性：

*  activeStyle：活跃时（匹配时）的样式
 *  activeClassName：活跃时添加的class

如下：

<NavLink to="/" exact activeStyle={
        {color: "red"}}>首页</NavLink>
    <NavLink to="/about" activeStyle={
        {color: "red"}}>关于</NavLink>
    <NavLink to="/profile" activeStyle={
        {color: "red"}}>我的</NavLink>

如果需要实现`js`实现页面的跳转，那么可以通过下面的形式：

通过`Route`作为顶层组件包裹其他组件后,页面组件就可以接收到一些路由相关的东西，比如`props.history`

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

`props`中接收到的`history`对象具有一些方便的方法，如`goBack`，`goForward`,`push`

### redirect ###

用于路由的重定向，当这个组件出现时，就会执行跳转到对应的`to`路径中，如下例子：

const About = ({
      match: {
        params: { name },
      },
    }) => (
      // props.match.params.name
      <Fragment>
        {name !== "tom" ? <Redirect to="/" /> : null}
        <h1>About {name}</h1>
        <FakeText />
      </Fragment>
    )

上述组件当接收到的路由参数`name` 不等于 `tom` 的时候，将会自动重定向到首页

### switch ###

`swich`组件的作用适用于当匹配到第一个组件的时候，后面的组件就不应该继续匹配

如下例子：

如果不使用`switch`组件进行包裹

除了一些路由相关的组件之外，`react-router`还提供一些`hooks`，如下：

*  useHistory
 *  useParams
 *  useLocation

### useHistory ###

`useHistory`可以让组件内部直接访问`history`，无须通过`props`获取

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 ###

const About = () => {
      const { name } = useParams();
      return (
        // props.match.params.name
        <Fragment>
          {name !== "John Doe" ? <Redirect to="/" /> : null}
          <h1>About {name}</h1>
          <Route component={Contact} />
        </Fragment>
      );
    };

### useLocation ###

`useLocation` 会返回当前 `URL`的 `location`对象

import { useLocation } from "react-router-dom";
    
    const Contact = () => {
      const { pathname } = useLocation();
    
      return (
        <Fragment>
          <h1>Contact</h1>
          <p>Current URL: {pathname}</p>
        </Fragment>
      );
    };

## 三、参数传递 ##

这些路由传递参数主要分成了三种形式：

*  动态路由的方式
 *  search传递参数
 *  to传入对象

### 动态路由 ###

动态路由的概念指的是路由中的路径并不会固定

例如将`path`在`Route`匹配时写成`/detail/:id`，那么 `/detail/abc`、`/detail/123`都可以匹配到该`Route`

<NavLink to="/detail/abc123">详情</NavLink>
    
    <Switch>
        ... 其他Route
        <Route path="/detail/:id" component={Detail}/>
        <Route component={NoMatch} />
    </Switch>

获取参数方式如下：

console.log(props.match.params.xxx)

### search传递参数 ###

在跳转的路径中添加了一些query参数；

<NavLink to="/detail2?name=why&age=18">详情2</NavLink>
    
    <Switch>
      <Route path="/detail2" component={Detail2}/>
    </Switch>

获取形式如下：

console.log(props.location.search)

### to传入对象 ###

传递方式如下：

<NavLink to={
        {
        pathname: "/detail2", 
        query: {name: "kobe", age: 30},
        state: {height: 1.98, address: "洛杉矶"},
        search: "?apikey=123"
      }}>
      详情2
    </NavLink>

获取参数的形式如下：

console.log(props.location)

## 参考文献 ##

*  http://react-guide.github.io/react-router-cn/docs/API.html\#route

\--The End--

系列正在更新：22/33

点击下方卡片解锁更多

![6e203f462eb6072be2d00f11ea6f8f59.png][]

创作不易，星标、点赞、在看 三连支持

[daf23e31f11d9996821ecaa32bb03bed.png]: /images/20220829/3af8593d16b641d7ae75a88432306ffe.png
[6e203f462eb6072be2d00f11ea6f8f59.png]: /images/20220829/19b4fc2c1c2d4b7c885af5ec7f0ec8be.png