React Router：路径变更时Switch未正确切换渲染页面的问题

问题核心原因 #

• 路由匹配逻辑配置错误：React Router 默认采用前缀匹配规则判断路由是否生效，即只要当前URL的开头和Route的path值一致，就会命中该路由。你的代码中<Route path="/">位于Switch的最靠前位置，而所有合法URL必然以/开头，因此Switch会优先命中根路径路由，后续配置的/sell路由永远不会被Switch检测到，自然无法渲染对应内容。
• 冗余嵌套Router破坏路由上下文：Router组件的作用是为整个应用注入统一的路由状态上下文，单个单页应用仅需在最外层放置1个Router即可。你在根路径渲染的按钮区域，额外嵌套了一层独立的Router，会导致内部的Link组件和外层的路由渲染逻辑处于完全隔离的两个路由系统，哪怕匹配规则修正，也会出现跳转状态不同步的问题。

修正后的可运行代码 #

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Helmet from "react-helmet";

import CreateList from "./CreateList";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { appTitle: "better craigslist"};
    }

    render() {
        return (
            <React.Fragment>
                <Helmet>
                    <title>{this.state.appTitle}</title>
                </Helmet>
                {/* 全局仅保留1个Router，删除内部嵌套的冗余Router */}
                <Router>
                    <Switch>
                        {/* 将匹配范围更窄的/sell路由放在前面 */}
                        <Route path="/sell">
                            <h1>Test</h1>
                        </Route>
                        {/* 给根路径路由添加exact属性，实现路径完全匹配 */}
                        <Route exact path="/">
                            <div id="header-text">
                                <h1 className="center-align">
                                    <b>Sellify</b>
                                </h1>
                                <h5 className="center-align">
                                    Need to get rid of your stuff? create a listing and sell it here! <br /> Looking for something? Check if its on selify!
                                </h5>
                            </div>
                            <div className="col s12 center">
                                {/* Link直接使用外层Router的上下文即可，无需单独包裹Router */}
                                <Link to="/sell">
                                    <button className="btn" id="create-listing-button">
                                        Create Listing
                                    </button>
                                </Link>
                            </div>
                        </Route>
                    </Switch>
                </Router>
            </React.Fragment>
        );
    }
}

export default Home;

修复后效果验证 #

• 访问根路径/时，会正常渲染首页的标题、说明文字和创建列表按钮
• 点击按钮跳转至/sell路径时，由于根路径路由配置了exact完全匹配规则，不会再命中首页路由，Switch会正常渲染/sell对应的页面内容，不会残留首页的DOM元素

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