React Route配置location.pathname后点击侧边栏链接内容不渲染

直接导致切URL不更新页面的核心错误 #

你调整路由配置的逻辑从根上就搞反了React Router的工作机制，这就是切URL不更新内容的根本原因：

• 首先是语法级的解构错误：const {pathname} = props.location.pathname;这行代码本身就拿不到有效值，props.location.pathname是纯字符串，不是可解构的对象，这么写出来的pathname是undefined，根本没有实际路径值
• 就算修正解构写法为const pathname = props.location.pathname;，你的逻辑也完全错了：Route组件的path属性是预先声明的匹配规则，作用是拿这个规则去和当前实际URL做比对，匹配上才渲染对应组件。但你现在把数组里每一条路由的path值全绑定成了“打开页面那一刻的实时URL路径”，等于所有路由的匹配规则永远固定在你第一次打开页面的那个地址上，不管用户点侧边栏把URL改成啥，规则都不会变，自然匹配不到对应的组件
• 叠加Switch组件的执行特性：它会从上到下遍历路由列表，匹配到第一个符合规则的路由就立刻停止渲染。你现在所有路由的匹配规则完全一样，不管URL怎么变，永远只会渲染列表第一个的Introduction组件，和你遇到的“URL正常更新，页面内容不换”的现象完全吻合

代码里隐藏的其他基础问题 #

就算回到你之前能跑的版本，代码里也埋了一堆容易触发异常的解构bug，之前能正常运行只是没碰到边界情况：

• 原Routes.js里的const {path} = props.path;、const {location} = props.location.pathname; 都是同样的对字符串做对象解构的错误写法，本质拿不到有效值
• SideBarItems.js的map判断逻辑搞反了类型判断的取值逻辑：判断为字符串类型的分支里，给字符串取.CourseTopic属性，永远拿不到值；判断为对象类型的分支里，取不存在的.name、.names属性，拼路由路径的时候很容易生成错误值
• 原路由列表没有给子路由配置exact属性，长期运行容易出现路径前缀误匹配的问题

可落地的简化方案（不用手动硬写重复路由） #

你想要“从现有配置自动生成路由、减少重复代码”的思路是对的，只是实现方向错了，不需要从location对象读实时路径当匹配规则：

• 把侧边栏导航项和路由组件一一对应到同一个配置数组里，给每个配置项标注好对应组件、导航显示名称、所属课程主题
• 利用固定的路由前缀（比如你提到的Lesson），遍历配置数组自动生成路由规则，路径直接按照/[前缀]/[导航项名称]的规则拼接就行，不用手动一条一条写重复的路由配置
• 所有解构操作对着真实的对象结构来：location本身才是可以解构的对象，要拿路径直接写const { pathname } = props.location;，不要再对着字符串做解构
• 给所有路由补上明确的exact标识，避免前缀匹配的歧义

内容的提问来源于stack exchange，提问作者Synchro