盒子
盒子
文章目录
  1. 面试题中的路由部分
    1. 什么是路由
    2. Router和Route
    3. 服务端路由
    4. 客户端路由
    5. 动态路由

面试中的路由问题

面试题中的路由部分

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

什么是路由

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

Router和Route

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

1
2
3
4
5
6
<Router>
<Route path="/" component={Index} />
<Route path="/hello" component={Hello}/>
<Route path="/404" component={Error}/>
...
</Router>

每一条<Route>就是一条路由,其中包括当前路径和映射的URL。<Router>类似一个容器,里边包裹着一条条的路由。

服务端路由

服务器端会接受到客户端的http请求,根据请求中的URL,找到响应的映射函数,然后执行该函数,向返回的值发送给客户端。

在Express中如下:

1
2
3
app.get('/', (req, res) => {
res.sendFile('index')
})

客户端路由

在客户端,路由的映射函数通常是进行一些DOM的显示和隐藏操作。目前前端的实现方式有两种,Hash模式和History模式

  • Hash模式。在url中的#及后边的部分是hash,向服务端发送请求的时候,hash部分不会发送出去。
  • History模式。主要使用history.pushStatehistory.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中:

1
2
3
app.get('/user/:id', (req, res) => {
...
})

Next.js中:

1
2
3
// page/posts/[id].js
export function getStaticPaths { ... }
export function getStaticProps({ params }) { ... }

React-Router中:

1
2
3
<Router>
<Route path="/user/:id" />
</Router>

下次准备做一个next项目,做完会上传到github上。

个人微信公众号

支持一下
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集