React 路由概念解析

    
        标签：
        
            教程
        
            React
        
            JavaScript
        
    发布于：2020-06-28 18:10:32
    编辑于：2022-11-15 13:00:35
    浏览量：1935

HashRouter 与 BrowserRouter 区别

HashRouter：使用 URL 哈希，URL 的形式是：https://domain/path/#/path

BrowserRouter：没有 #，且需要服务器端进行配置（即对该路径下的所有路径返回同一个页面）。

如果服务端不配置的话，假设我们有两个页面，首页 / 和 /admin，在页面内进行跳转没问题，浏览器不会向服务端进行请求，但是当用户在 /admin 页面刷新页面或者直接在地址栏输入 /admin 进行访问时浏览器会向服务端进行请求，此时将 404 如果服务端没配置的话。为什么前端开发的时候不会出现这种情况？Webpark 可能已经进行过适当的配置，所以才不会 404。所谓的配置即对该子路径下的所有路径都返回同一个页面。

实现原理

老浏览器的 history: 主要通过 hash 来实现，对应 createHashHistory
高版本浏览器: 通过 html5 里面的 history，对应 createBrowserHistory
node 环境下: 主要存储在 memeory 里面，对应 createMemoryHistory

从而达到更新 URL 而无需重新加载的效果。

代码示例

我们需要装 react-router-dom，而 react-router 不需要我们手动装。

import { HashRouter, Route, Switch } from 'react-router-dom';

class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <ScrollToTop>
          <Container style={{ marginTop: '5em', minHeight: '80vh' }}>
            <Route path="/" component={Header} />
            <Switch>
              <Route path="/" exact component={Goods} />
              <Route path="/goods" exact component={Goods} />
              <Route path="/goods/new" exact component={EditGoods} />
              <Route path="/goods/:goodsId" exact component={GoodsDetail} />
              <Route path="/goods/edit/:goodsId" exact component={EditGoods} />
              <Route path="/order" exact component={Order} />
              <Route path="/user/:userId" exact component={User} />
              <Route path="/administer" exact component={Administer} />
              <Route path="/login" exact component={Login} />
              <Route path="/register" exact component={Register} />
            </Switch>
          </Container>
          <Footer />
        </ScrollToTop>
      </HashRouter>
    );
  }
}

解读：

注意到，不管对于哪个页面，其都有 Header，为什么呢？因为 Header 对应的路径是 /，每个路径都会匹配 /，这样 Header 就会渲染。

为什么要有 Switch？Switch 内的路由只会渲染第一个匹配的。

为什么要有 exact？为了精确匹配，否则 /goods/2 除了会匹配 /goods/:goodsId 之外也会匹配 /goods。

为什么？因为 /goods 也是 /goods/2 的子串。如果 Swith 内的 /goods 在 /goods/:goodsId 的前面，当我们访问 /goods/2 前者就会被渲染而 /goods/:goodsId 不会被渲染，这不是我们想要的行为，因此标明 exact 告诉 React 进行精确匹配。

完整代码示例见：https://github.com/LeeJiangWei/online-mall-client

如何跳转到其他页面

直接使用 a 标签？貌似确实跳转了，但是注意到页面重新加载了！实际上当我们点击后，浏览器向服务器发出了请求。

可不可以不向服务器发出请求呢？

import { Link } from 'react-router-dom';

<Link to="/path"> Go to "/path" </Link>
<Menu.Item as={Link} to="/path"/>

上面两种写法都行，第一种是直接用 Link 组件，第二种的 Menu 是一个 React UI 库中提供的组件。

可不可以直接用代码进行跳转？ this.props.history.push('/path');

参考

Links: React-路由概念解析