React路由无法渲染Welcome/LoginForm组件问题求助

我来帮你分析下为什么Welcome和LoginForm组件都没渲染～

问题根源 #

你在index.js里给根路径的Route加了exact属性，这会导致只有当URL完全等于"/"时，Main组件才会渲染。当SelectList里的代码执行this.props.history.push("/welcome")后，URL变成了"/welcome"，这时候根路由的exact条件不满足，Main组件就不会被渲染了——连带着里面的SelectList和它的子路由也都不会加载，自然Welcome组件就显示不出来。

解决方案 #

只需要去掉index.js中根路由的exact属性即可：

修改后的index.js代码：

import React from "react"; 
import ReactDOM from "react-dom"; 
import { Route, BrowserRouter } from "react-router-dom"; 
import Main from "./Main"; 
import registerServiceWorker from "./registerServiceWorker"; 

ReactDOM.render( 
  <BrowserRouter> 
    {/* 移除exact属性 */}
    <Route path="/" component={Main} /> 
  </BrowserRouter>, 
  document.getElementById("root") 
); 
registerServiceWorker();

原理说明 #

去掉exact后，只要URL以"/"开头（所有前端路由的URL都是如此），Main组件就会一直渲染。这样当你跳转到"/welcome"或"/login"时，Main组件里的SelectList会正常加载，它内部的Switch就能匹配到对应的子路由，渲染出Welcome或LoginForm组件了。

另外，你可以保留SelectList里的逻辑，因为currentUser已经设置为"hello"，它会自动跳转到"/welcome"，现在路由匹配正常后，就能看到Welcome组件的内容了。

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