React-Router心得体会1. React-Router的实现原理是什么？客户端路由实现的思想：基于 hash

1. React-Router的实现原理是什么？

客户端路由实现的思想：

基于 hash 的路由：通过监听

hashchange

事件，感知 hash 的变化

改变 hash 可以直接通过 location.hash=xxx
基于 H5 history 路由：
改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API
监听 url 的变化可以通过自定义事件触发实现

react-router 实现的思想：

基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知
通过维护的列表，在每次 URL 发生变化的回收，通过配置的路由路径，匹配到对应的 Component，并且 render

2. 如何配置 React-Router 实现路由切换

（1）使用组件

路由匹配是通过比较的 path 属性和当前地址的 pathname 来实现的。当一个匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的将始终被匹配。

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

（2）结合使用组件和组件

用于将分组。

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
</Switch>

不是分组所必须的，但他通常很有用。一个会遍历其所有的子元素，并仅渲染与当前地址匹配的第一个元素。

（3）使用、、组件

组件来在你的应用程序中创建链接。无论你在何处渲染一个，都会在应用程序的 HTML 中渲染锚（）。

<Link to="/">Home</Link>   
// <a href='/'>Home</a>

是一种特殊类型的当它的 to属性与当前地址匹配时，可以将其定义为"活跃的"。

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
    React
</NavLink>
// <a href='/react' className='hurray'>React</a>

当我们想强制导航时，可以渲染一个，当一个渲染时，它将使用它的to属性进行定向。

3. React-Router怎么设置重定向？

使用组件实现路由的重定向：

<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={Profile}/>
</Switch>

当请求 /users/:id 被重定向去 '/users/profile/:id'：

属性 from: string：需要匹配的将要被重定向路径。
属性 to: string：重定向的 URL 字符串
属性 to: object：重定向的 location 对象
属性 push: bool：若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。

4. react-router 里的 Link 标签和 a 标签的区别

从最终渲染的 DOM 来看，这两者都是链接，都是标签，区别是∶ 是react-router 里实现路由跳转的链接，一般配合使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转，的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。

做了3件事情:

有onclick那就执行onclick

click的时候阻止a标签默认事件

根据跳转href(即是to)，用history (web前端路由两种方式之一，history & hash)跳转，此时只是链接变了，并没有刷新页面而标签就是普通的超链接了，用于从当前页面跳转到href指向的另一个页面(非锚点情况)。

a标签默认事件禁掉之后做了什么才实现了跳转?

let domArr = document.getElementsByTagName('a')
[...domArr].forEach(item=>{
    item.addEventListener('click',function () {
        location.href = this.href
    })
})

5. React-Router如何获取URL的参数和历史对象？

（1）获取URL的参数

get传值

路由配置还是普通的配置，如：'admin'，传参方式如：'admin?id='1111''。通过this.props.location.search获取url获取到一个字符串'?id='1111' 可以用url，qs，querystring，浏览器提供的api URLSearchParams对象或者自己封装的方法去解析出id的值。

动态路由传值

路由需要配置成动态路由：如path='/admin/:id'，传参方式，如'admin/111'。通过this.props.match.params.id 取得url中的动态路由id部分的值，除此之外还可以通过useParams（Hooks）来获取

通过query或state传值

传参方式如：在Link组件的to属性中可以传递对象{pathname:'/admin',query:'111',state:'111'};。通过this.props.location.state或this.props.location.query来获取即可，传递的参数可以是对象、数组等，但是存在缺点就是只要刷新页面，参数就会丢失。

（2）获取历史对象

如果React >= 16.8 时可以使用 React Router中提供的Hooks

import { useHistory } from "react-router-dom";
let history = useHistory();

使用this.props.history获取历史对象

let history = this.props.history;