React Router怎么使用

这篇文章主要讲解了“React Router怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React Router怎么使用”吧!

面试题中的路由部分

路由最初是出现在后端中,后端根据不同的路由返回不同的页面,后来随着单页面应用(SPA)诞生,前端也出现了路由,实现了不用刷新页面就可以更新页面的效果。 

什么是路由

简单的说,「路由就是URL到函数的映射」。路由的本质是「监听URL的变化,然后匹配路由规则,显示相应的页面。」

 

Router和Route

在React-Router中,路由使用基本如下所示。

<Router>
  <Route path="/" component={Index} />
  <Route path="/hello" component={Hello}/>
  <Route path="/404" component={Error}/>
  ...
</Router>

 

每一条<Route>就是一条路由,其中包括当前路径和映射的URL。<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中:

<Router>
  <Route path="/user/:id" />
</Router>

感谢各位的阅读,以上就是“React Router怎么使用”的内容了,经过本文的学习后,相信大家对React Router怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

原创文章,作者:carmelaweatherly,如若转载,请注明出处:https://blog.ytso.com/219910.html

(0)
上一篇 2022年1月2日
下一篇 2022年1月2日

相关推荐

发表回复

登录后才能评论