一、 请你说说react的路由是什么？
React的路由是纯前端的路由，就是根据hash或browser path的变化，框架内封装好了方法，可以自由的切换DOM展示，来模拟页面或局部页面被替换的目的；让浏览器不用刷新，也能获取想要的页面结构，保存内存数据，提升用户体验
当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>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参数} />)
}
想深度学习路由的小伙伴，可以参考其他作者的文章