React Router配置后访问/home路径MainScreen组件不显示问题求助

问题原因 #

你使用的是React Router v5版本的<Switch>组件，它的路由匹配逻辑是按定义顺序从上到下匹配，只要命中规则就停止继续匹配。你定义的第一个路由path="/"会匹配所有以/开头的路径，所以访问/home的时候，首先命中了根路径的路由规则，直接渲染了LoginScreen组件，不会继续匹配后面的/home规则。

解决方案（两种任选其一即可） #

方案1：给根路径路由添加exact属性开启精确匹配 #

添加exact后，只有当访问路径和path完全相等时才会命中该路由，访问/home就不会匹配根路径的规则了。
修正后代码：

return (
    <div className="App">
    <Router>    
        <Switch>
          <Route path="/" exact>
              <LoginScreen />
          </Route>
          <Route path="/home" >
            <MainScreen />
          </Route>
        </Switch>
      </Router>
    </div>
  );

方案2：调整路由定义顺序，把更具体的路径放在前面 #

<Switch>会优先匹配先命中的规则，把/home路由放在根路径路由前面，访问/home的时候会先命中这个规则，不会触发后面的根路径路由。
修正后代码：

return (
    <div className="App">
    <Router>    
        <Switch>
          <Route path="/home" >
            <MainScreen />
          </Route>
          <Route path="/" >
              <LoginScreen />
          </Route>
        </Switch>
      </Router>
    </div>
  );

补充说明 #

如果后续你升级到React Router v6，<Switch>组件被替换成了<Routes>，默认就是精确匹配，不需要加exact，同时路由定义顺序也不再影响匹配结果，会自动优先匹配更具体的路径。

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