一、 请你说说react的路由是什么？
React的路由是纯前端的路由，就是根据hash或browser path的变化，框架内封装好了方法，可以自由的切换DOM展示，来模拟页面或局部页面被替换的目的；让浏览器不用刷新，也能获取想要的页面结构，保存内存数据，提升用户体验
二、React-Router 实现原理？
当url发生变化时，路由通过监听url的变化，我们不仅能直接获取和解析url路径，并且通过路由匹配，展示相对应地组件，即React组件的展示，授权路由进行控制，保证了url和视图的同步。
三、React-Router的路由的几种模式
1.BrowserRouter:浏览器的路由模式，开发中最常用的模式，用 pushState 和 popState 事件构建路由
2.HashRouter:在路径前加一个#号成为一个哈希值，Hash模式的好处就是刷新网页仍然能找到对应的路径，用 hash 和 hashchange 事件构建路由，使用的方法有 go(), replace(), push()等，
3.MemoryRouter:不存储History，所有路由保存在内存里，不能前进后退，因为地址栏没有发生任何变化
4.NativeRouter:配合ReactNative使用，多用于移动端
5.StaticRouter:静态路由，需要和后台服务器配合设置
四、React 路由跳转的几种方式？
1. params形式
函数组件-传参
| 1 2 3 4 5 6 7 8 |
import React from 'react'
import { useHistory } from 'react-router-dom'
export default ()=> {
const history = useHistory()
// 页面跳转方法
history.push({pathname: '/personal', search: 'test=22222'})
history.push({pathname: '/personal',state: 'test=22222'})
}
|
函数组件-接受参数
| 1 2 3 4 5 6 7 8 |
import React from 'react'
import { useLocation } from 'react-router-dom'
export default ()=> {
const location = useLocation()
// 页面跳转方法
console.log(location, 'props')
return 123
}
|
2. Link形式
Llink上携带传递的参数, 携带的参数以对象形式
| 1 2 3 4 5 |
<Link to={
{ pathname: "/XXX", //xxx为跳转到的路径
state: { title: this.state.exam.title, actionCode: this.state.exam.actionCode }
}
} >切换考试科目 <i className="iconfont icon-jiantou"></i></Link>
|
类组件-接受参数
| 1 2 3 |
componentDidMount() {
console.log(this.props.location.state.XXX); //xxx指state对象中的键名
}
|
函数组件-接受参数
| 1 2 3 4 5 6 |
function Fast(props) {
...
useEffect(() => {
console.log(props.location.state.XXX);//xxx指state对象中的键名
})
}
|
3. url传参
1.传参
<Route exact path="/detail/:id" component={Detail}></Route>
2. 接受参数
this.props.history.push({
pathname: '/detail', //要跳转到的路径
state: { //参数地址栏不显示，刷新地址栏，参数不丢失
id: 456
}
})}
this.props.history.push({
pathname: '/detail', //要跳转到的路径
query: { //参数地址栏不显示，刷新地址栏，参数不丢失
id: 456
}
})}
2. 接受参数
this.props.history.location.state
this.props.history.location.query
五、React-Router的<Link>标签与<a>标签有什么区别
Link 组件最终会渲染为 HTML 标签 <a>，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法。
Link 只负责触发 url 变更，Route 只负责根据 url 渲染组件
相比于 <a> 标签，<Link> 避免了不必要的渲染
六、在history模式中push和replace有什么区别？
push('')：添加一个新的记录到历史堆栈, history.length+1。（一般会用来跳转到一个新页面, 用户点击浏览器的回退按钮可以回到之前的路径。）
replace('')：替换掉当前堆栈上的记录， history.length不变。
六、React-Router怎么设置重定向？
采用 Redirect 进行重定向
七、React-Router怎么获取历史对象？
1.如果React >= 16.8 时可以使用 React Router中提供的Hooks
import { useHistory } from "react-router-dom";
let history = useHistory();
2.使用this.props.history获取历史对象
let history = this.props.history;
九、react的路由和普通路由有什么区别？
React路由是前端的路由，普通路由指的是后端的路由
React路由不管是hash还是browser的模式，都是在响应了hash/browser的change之后，再变更页面的DOM结构，由于是单页应用，页面文件始终没有变化;通过请求的path，然后相应不同的组件
十、请你说说react的路由的优缺点？
优点：
配置灵活
支持丰富的传参
利用hashRouter也可以实现低版本浏览器的兼容
缺点：
v4之后使用url query的方式传参比较繁琐，解析时需要使用queryString 和 location.search
利用react-router的query或state进行传参打开新的路由，刷新页面后数据会丢失
BrowserRouter的模式需要服务器配合，保证在前端路由的切换范围内，都只相应同一个html文件
BrowserRouter需要现代浏览器才能兼容
十一、React-Router 4怎样在路由变化时重新渲染同一个组件？
1. 可以在这个组件的componentWillReceiveProps和shouldComponentUpdate生命周期方法中添加url变化的判断，如果url判断变化，变化了就会就会重新执行render()函数，组件变会进行重新渲染。
2. 在同一个组件添加不同的key,以下重新封装了组件：
export default function (props) {
return (<组件 {...props} key={search参数} />)
}
想深度学习路由的小伙伴，可以参考其他作者的文章
标签：面试题,React,state,props,组件,Router,路由,history From： https://www.cnblogs.com/gqx-html/p/17368694.html