React js Route无法渲染组件 外部调用正常如何排查解决

问题根因 #

你使用的react-router-dom v5版本中，Redirect组件不支持嵌套Route作为子元素。你当前将登录路由的Route写在了Redirect的内部，导致Switch的路由匹配逻辑完全失效，因此组件无法正常渲染。

修复方案 #

将Redirect与Route作为Switch的平级子元素摆放，不要嵌套。

修正后代码 #

import './App.css';
import Login from './Components/Login/Login';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import Protected from './Components/Common/Protected';

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Redirect exact from="/" to="/Login" />
          <Route exact path="/Login" > 
            <Login /> 
          </Route>
          {/* 后续需要添加的受保护路由可以放在这里，比如：
          <Protected path="/dashboard" component={Dashboard} />
          */}
        </Switch>
      </Router>
    </div>
  );
}

export default App;

补充说明 #

如果后续需要添加需要登录才能访问的受保护路由，直接在Switch内部和现有Redirect、Route平级插入你引入的Protected组件即可，不要嵌套在其他路由/重定向组件内部。

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