Learnnext-5 :clean urls with Route Masking

这一节讲的是如何将路由屏蔽掉并显示成我们想要的url效果。

在next/link 的link组件当中，有一个as属性用于屏蔽原有的url并且展示你想要的url：

import Layout from '../components/MyLayout.js'
import Link from 'next/link'

const PostLink = (props) => (
  

    
      {props.title}
    
  
)

export default () => (
  
    
My Blog
    

      
      
      
    
  
)

然后你会看到url确实变成了你想要的效果。
但是这里又出现其他问题了： 在你跳转过去的时候，你reload页面，就会发现页面上出现了404提示

image.png

这是因为我们在pages目录下没有p/hello-nextjs这个页面，所以服务器找不到这个页面，就报了404。
这样的情况，我们当然不能直接就拿去生产环境，我们必须要修复这个bug。
下一节讲解如何在server当中解决这个问题。