react-router-dom中的BrowserRouter与HashRouter、link与Navlink区别

最新推荐文章于 2024-05-11 15:50:53 发布

who_become_gods

最新推荐文章于 2024-05-11 15:50:53 发布

阅读量465

点赞数

原文链接：https://blog.csdn.net/weixin_30496431/article/details/101331797?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-12-101331797.nonecase&utm_term=navlink%20%E4%BA%8B%E4%BB%B6

版权

HashRouter包裹下访问根服务

假设为localhost:3000/

import { HashRouter as Router, Route, Redirect } from 'react-router-dom';  
// as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改

import Home from './pages/Home/index';
import Hooks from './pages/Hooks/index';

export default function App() {
  return (
    <Router>
      <Route path="/">
        <Redirect to="/home" />
      </Route>
      <Route path="/home" component={Home} />
      <Route path="/hooks" component={Hooks} />
    </Router>
  )
}

操作一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/#/home,可正常访问.

操作二: 浏览器直接输入localhost:3000/#/hooks
结果: 可正常访问

将HashRouter更改为BrowserRouter

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';  // 使用BrowserRouter

操作一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/home,可正常访问

操作二: 浏览器直接输入localhost:3000/hooks
结果: 浏览器无法获得正确的结果,Cannot GET /hooks

操作二: 浏览器直接输入localhost:3000/home
结果: 浏览器无法获得正确的结果,Cannot GET /home

操作三: 浏览器直接输入localhost:3000/成功后,点击内容Home
结果:可成功跳转

问题:为什么hashRouter可以直接访问路径,而browserRouter会出现找不到路由的情况？为什么hashRouter在前端跳转就能成功?

服务器路由: browserRouter, 前端路由: hashRouter

browserRouter

如果前端使用了browserRouter,每次改变路由时，会向服务器发送请求，因为服务器未配置对应的路径指向对应的文件，自然导致出现404的情况.(对于初始化页面,即路由为/时,不会发送请求)
因此在使用browserHistory需要再加一层服务器配置(node/nginx),让前端发送的请求映射到对应的html文件上.

hashRouter

由于hashRouter会在路径上添加/#/，而/#/后面的所有都不会发送到服务器端，即对于服务器而言，路径依旧是localhost:3000，路由切换在前端完成。
但是官方会更推荐使用browserRouter，貌似是因为其构建于H5的History
API，比起hashRouter，它多出了更多的方法操控url

link与Navlink

Link

现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React
Router提供了组件用来避免这种状况发生。当你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载
由于Link属于前端内部跳转,在跳转时也不会向服务器发送请求.


<Link to="/about">关于</Link>

// to为obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

使用to参数来描述需要定位的页面。它的值既可是字符串，也可以是location对象（包含pathname、search、hash、与state属性）如果其值为字符串，将会被转换为location对象

<Link to="/courses" replace />

replace(bool)：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；为 false
时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

点击Link后，路由系统发生了什么？

Link 组件最终会渲染为 HTML a标签，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。
虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的history 指的是通过 history 包里面的 create*History 方法创建的对象，window.history则指定浏览器原生的 history 对象，由于有些 API 相同，不要弄混）。history 包中底层的 pushState方法支持传入两个参数 state 和 path，在函数体内有将这两个参数传输到 createLocation 方法中。

location = {
  pathname, // 当前路径，即 Link 中的 to 属性
  search, // search
  hash, // hash
  state, // state 对象
  action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE
  key, // 用于操作 sessionStorage 存取 state 对象
};

系统会将上述 location 对象作为参数传入到 TransitionTo 方法中，然后调用 window.location.hash
或者window.history.pushState() 修改了应用的 URL，这取决于你创建 history
对象的方式。同时会触发history.listen 中注册的事件监听器。

NavLink

是的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>