建站
咨询
售后
建站咨询
这篇文章主要讲解了“React Router怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“React Router怎么使用”吧！
我们提供的服务有：做网站、成都网站制作、微信公众号开发、网站优化、网站认证、裕华ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的裕华网站制作公司
面试题中的路由部分
路由最初是出现在后端中，后端根据不同的路由返回不同的页面，后来随着单页面应用（SPA）诞生，前端也出现了路由，实现了不用刷新页面就可以更新页面的效果。
什么是路由
简单的说，「路由就是URL到函数的映射」。路由的本质是「监听URL的变化，然后匹配路由规则，显示相应的页面。」
Router和Route
在React-Router中，路由使用基本如下所示。
...
每一条
服务端路由
服务器端会接受到客户端的http请求，根据请求中的URL，找到响应的映射函数，然后执行该函数，向返回的值发送给客户端。
在Express中如下：
app.get('/', (req, res) => {
res.sendFile('index')
})
客户端路由
在客户端，路由的映射函数通常是进行一些DOM的显示和隐藏操作。目前前端的实现方式有两种，「Hash模式和History模式」。
Hash模式。在url中的 #及后边的部分是hash，向服务端发送请求的时候，hash部分不会发送出去。History模式。主要使用 history.pushState和history.replaceState改变URL。
两种方法的比较：
Hash模式只更改 #后的内容，History可以通过API设置任意的同源URL；History模式可以通过API添加任意类型的数据到历史记录中，Hash模式只能更改字符串； Hash兼容性更好，History更加正式； Hash无需后端配置，History需要配置 index.html用于匹配不到资源的时候（返回index)页面。
动态路由
上边所以说的都是静态路由，除此之外还有动态路由。比如，当我们登陆github时，url是https://www.github.com/Bzsheng。人家肯定不可能为每个用户创建一条路由，这时候就是创建一条动态的路由，形如/:id来实现的，当我登陆的时候，将参数Bzsheng传递过去，从而获取到页面。
Express中：
app.get('/user/:id', (req, res) => {
...
})
Next.js中：
// page/posts/[id].js
export function getStaticPaths { ... }
export function getStaticProps({ params }) { ... }
React-Router中：
感谢各位的阅读，以上就是“React Router怎么使用”的内容了，经过本文的学习后，相信大家对React Router怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
本文名称：ReactRouter怎么使用
本文网址：http://scyingshan.cn/article/pgdgoc.html
