歌谣的博客

[react-router] React-Router怎么获取URL的参数？ [react-router] 在history模式中push和replace有什么区别？[react-router] React-Router 4中＜Router＞组件有几种类型？ [react-router] React-Router怎么设置重定向？ [react-router] React-Router怎么获取历史对象？[react-router] React-Router 4的switch有什么用？[

[react-router] 在history模式中push和replace有什么区别？push('')：添加一个新的记录到历史堆栈, history.length+1。（一般会用来跳转到一个新页面, 用户点击浏览器的回退按钮可以回到之前的路径。）replace('')：替换掉当前堆栈上的记录， history.length不变。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...

[react-router] React-Router怎么获取URL的参数？通过params 类组件：在保证props能获取到路由信息的前提下（如果不是直接嵌套在<Route/>下，需要使用withRouter的HOC），通过this.props.match.params获取 函数式组件：const params = useParams(); 通过search,demo如下：// query传参this.props.history.push({ pathname:

[react-router] React-Router 4中<Router>组件有几种类型？HashRouter：老浏览器的history,主要通过hash来实现，对应createHashHistory() BrowserRouter：高版本浏览器,通过html5里面的history，对应createBrowserHistory() **MemeoryRouter：**node环境下,主要存储在memeory里面，对应createMemoryHistory()*createHashHi

[react-router] React-Router怎么设置重定向？采用 Redirect 进行重定向个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...

[react-router] React-Router怎么获取历史对象？1.如果React >= 16.8 时可以使用 React Router中提供的Hooksimport { useHistory } from "react-router-dom";let history = useHistory(); 2.使用this.props.history获取历史对象let history = this.props.history;个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃.

[react-router] React-Router 4的switch有什么用？Switch的 子组件只能是Route或者Switch组件，它的作用是匹配到下面的第一个路由组件，下面的路由组件就不再进行匹配展示了个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...

[react-router] React-Router的实现原理是什么？1.react-router依赖基础 - history，是一个独立的第三方js库，可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。具体来说里面的history分为三类:HashRouter：老浏览器的history,主要通过hash来实现，对应createHashHistory() BrowserRouter：高版本浏览器,通过html5里面的history，对应createBrowserHistor

[react-router] React-Router的路由有几种模式？1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化4、NativeRouter：经常配合ReactNative使用，多用于移动端5、StaticRout

[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件？1.在同一个组件添加不同的key,以下重新封装了组件：export default function (props) { return (<组件 {...props} key={search参数} />)}2.但是不知道在路由跳转的地方加入key可行否？<Route path='/sdspace/offline/:id/detail' exact component={

[react-router] react的路由和普通路由有什么区别？React路由是前端的路由，普通路由指的是后端的路由 React路由不管是hash还是browser的模式，都是在响应了hash/browser的change之后，再变更页面的DOM结构，由于是单页应用，页面文件始终没有变化;通过请求的path，然后相应不同的页面个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚

[react-router] React-Router的<Link>标签和<a>标签有什么区别Link 组件最终会渲染为 HTML 标签 <a>，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法。Link 只负责触发 url 变更，Route 只负责根据 url 渲染组件相比于 <a> 标签，

[react-router] 请你说说react的路由的优缺点？优点：配置灵活 支持丰富的传参 利用hashRouter也可以实现低版本浏览器的兼容缺点：v4之后使用url query的方式传参比较繁琐，解析时需要使用queryString和location.search 利用react-router的query或state进行传参打开新的路由，刷新页面后数据会丢失 BrowserRouter的模式需要服务器配合，保证在前端路由的切换范围内，都只相应同一个html文件 Browser

[react-router] 请你说说react的路由是什么？React的路由是纯前端的路由，就是根据hash或browser path的变化，框架内封装好了方法，可以自由的切换DOM展示，来模拟页面或局部页面被替换的目的；让浏览器不用刷新，也能获取想要的页面结构，保存内存数据，提升用户体验个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...