React Router问题：/posts/new路径同时渲染两个组件求助

嘿，这个问题我之前也踩过坑！根源其实在于React Router的路由匹配顺序和规则，咱们一步步来理清楚：

问题原因 #

React Router是从上到下依次匹配路由的，哪怕你加了exact属性：

• 当你访问/posts/new时，路由系统会先检查第一条/，不匹配；接着检查/:category，也不匹配；然后到/:category/:id这条，它会把posts解析成category参数、new解析成id参数，刚好完全匹配路径的结构，所以exact条件也满足了，就会渲染PostDetailScreen；最后才匹配到/posts/new，渲染CreatePostScreen。这就导致两个组件同时被渲染了。

解决方案 #

核心思路就是把更具体的路由放在动态路由的前面，让精确的路径先被匹配到，这样就不会触发后面的动态路由了。

修改后的路由配置应该是这样的：

<Route exact path="/" component={HomeScreen} />
<Route exact path="/:category" component={HomeScreen} />
<Route exact path="/posts/new" component={CreatePostScreen} /> {/* 把这条移到动态路由前面 */}
<Route exact path="/:category/:id" component={PostDetailScreen} />

这样当你访问/posts/new时，系统会先匹配到第三条路由，直接渲染CreatePostScreen，不会再往下匹配/:category/:id了，冲突就解决啦！

另外补充一下，如果是React Router v6版本，写法会变成用element属性，而且默认就是精确匹配，但路由顺序的优先级依然重要，调整顺序的思路是一样的。

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