路由最初是出现在后端中,后端根据不同的路由返回不同的页面,后来随着单页面应用(SPA)诞生,前端也出现了路由,实现了不用刷新页面就可以更新页面的效果。
简单的说,路由就是URL到函数的映射。路由的本质是监听URL的变化,然后匹配路由规则,显示相应的页面。
在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,向服务端发送请求的时候,hash部分不会发送出去。history.pushState
和history.replaceState
改变URL。两种方法的比较:
#
后的内容,History可以通过API设置任意的同源URL;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>
下次准备做一个next项目,做完会上传到github上。