| -- components // 组件⽬录 | -- constants // 常量⽬录 | -- pages // 路由⽬录 | -- static // 静态资源⽬录 | -- .babelrc | -- .eslintrc | -- .gitignore | -- | -- ...其他配置⽂件复制代码再谈路由的路由刚开始给我的感觉就是，我靠，很NB啊。但是慢慢的⽤起来发现，坑还真不少。前⾯⼏篇也提到了，它是以pages下⾯的js⽂件作为路由路径惊醒匹配的，所以也就是说你想⽤到的页⾯全要以js⽂件的形式放进pages，那么层级嵌套关系怎么办？ok，尝试了⼀下，很容易解决了。路由层级[需求]： 与⽤户相关的包括⽤户列表，⽤户详细信息等等...这两个功能应该是同属于⽤户⼦模块，所以应该与⾸页不是同级关系。[解决办法]：pages下⾯新建⼦⽬录user⾥⾯包括和。 -- pages | -- user | -- | -- | -- 复制代码 可以看到，这样算是解决了⼀个问题。路由参数紧接着，问题⼜出现了，我们需要查看⽤户详情，以往来说，很容易想到 /user/userDetail/:username，这种嘛，参数通过url的params获取，但是，悲剧了。查了⼀下路由API，⼈家没给你提供params，只提供了query。query形式路由也就是说，暂时我们需要/user/userDetail?username=XXX的形式来实现⼯程，虽然说没什么问题，但是可能每个⼈习惯不⼀样吧。当然，对于我这种好说话的⼈，我可以接受O(∩_∩)O哈哈~// 其实Next的Link组件的href属性可以传⼊⼀个对象 {text} 复制代码 ok，实现效果就是这样，反正符合预期，只是使⽤query代替params了。P.S.真实是我不想费事搞这个东西，应该是可以解决的，稍后说我的想法params形式路由下⾯我来说说我的理解吧：⾸先，是为什么它不⽀持params形式的路由，前⾯提到过了，他是根据pages下的js⽂件来匹配路由的，那么你⽤params的路由势必/user/userDetail/:username，那么解析器会以为我应该寻找的是pages⽬录下⾯user⽬录下⾯UserDetail⽬录下⾯的${username}⽂件，不⽤想肯定找不到啊，这时候就是404页⾯了。所以这是我的理解，他为什么只使⽤query。其次，我认为两者只是形式上的区别，并没有本质上的区别，也就是实现效果是⼀样的，都能跳转到指定页⾯嘛，何必纠结呢？^_^最后，就是我看完路有部分的⽂档，我认为是可以做到params形式的跳转的，官⽅⽂档⾥可以⾃定义server:// 官⽅⽂档⾃定义serverconst { createServer } = require('http')const { parse } = require('url')const next = require('next')const dev = _ENV !== 'production'const app = next({ dev })const handle = uestHandler()e().then(() => { createServer((req, res) => { // Be sure to pass `true` as the second argument to ``. // This tells it to parse the query portion of the URL. const parsedUrl = parse(, true) const { pathname, query } = parsedUrl if (pathname === '/a') { (req, res, '/b', query) } else if (pathname === '/b') { (req, res, '/a', query) } else { handle(req, res, parsedUrl) } }).listen(3000, err => { if (err) throw err ('> Ready on localhost:3000') })})复制代码从上⾯可以看出来，我们可以将a路由匹配到b页⾯。也就是我们可以把/user/userDetail/:username的路由匹配到/user/userDetail?username=${username}上⾯嘛。不就解决问题了~O(∩_∩)O哈哈~机智如我，不过我没试验过，只是猜测，⽬前优先想开发⼀个系统，这⾥留坑，以后有机会再填~总结&&预告这篇⽂章讲的还是有点多了，哈哈，不过觉得越写越有灵感，⽽且说⼀句，的官⽅⽂档是我读过最喜欢的英⽂⽂档了Vue的是最好的中⽂⽂档^_^。接下来准备往项⽬⾥加⼊redux了~越来越有⼀个系统样⼦了

2023年8月1日发(作者：)

踩坑⼊门系列（三）—⽬录重构再谈路由踩坑⼊门系列(⼀)(⼆)(三)(四)(五)(六)(七)⽬录重构来说⼀说为什么要⽬录重构吧，在踩坑系列（⼀）的最后我提到了，很强⼤，为我们封装了路由，只需要在pages下⾯新建js⽂件，⾥⾯写上我们熟悉的页⾯也就是react组件，就会渲染出来！其实对于开发来说没区别，但是项⽬庞⼤以后，⼀个路由对应⼀个js⽂件，但是如果页⾯很复杂其实不是这个React组件也会很复杂，不是很符合组件化理念，后期也不好维护啊。⽽且，肯定要加redux的，这样的话就更加混乱了。所以现在趁着还清醒，赶快重新构建⼀下~抽离Layout我其实是想边学边⽤它搭建⼀个系统，具体是什么慢慢开发最后⼤家就清楚了。系统的样式就打算仿照掘⾦来写，感觉很简洁~掘⾦的样式很简单，就是⼀个Header，然后就是下⽅的内容区域了,最后这篇⽂章完事的样⼦会变成下⾯这样~ ⾸先，我们在跟⽬录下新建⼀个components⽂件夹，专门⽤来放我们的组件，新写⼀个：// /components/rt React, { Component } from 'react';import Link from 'next/link';import { color_youdao, color_youdao_border } from '../constants/CustomTheme';class Header extends Component { constructor(props) { super(props); const { title } = props; = { title }; } render() { const { title } = ; return (