如果使用 history.push 訪問特定路由，React-Router v5 不會重定向

Question

在我的反應應用程序中，我有/lead-manager路由、 /login路由和/路由，后者是我不希望任何人訪問的app.js本身，如果有人只是去我想要的/路由重定向到/lead-manager路由。 所以這就是我根據這里給出的解決方案所做的。

我的 app.jsx 部分

import {
  BrowserRouter as Switch,
  useHistory,
  Route,
  useLocation,
} from "react-router-dom";

const App = ({ confirmAuthentication }) => {
  let location = useLocation();
  let history = useHistory();

  useEffect(() => {
    async function fetchIt() {
      if (localStorage.jwt !== undefined) {
        confirmAuthentication();
      }
    }
    fetchIt();
    if (location.pathname === "/") {
      history.push("lead-manager");
    }
  }, []);
 return (
    <div>
      <Switch>
        <Route exact path="/testing">
          <TestingComponent />
        </Route>
        <PrivateRoute path="/lead-manager" component={LeadApp} />
        <Route exact path="/login">
          <LoginView />
        </Route>
      </Switch>
    </div>
  );
}

我在訪問/路徑時得到的 output 是 URL 中的/lead-manager 。 這是所需的，但該組件不會與/lead-manager路由中定義的組件相應地呈現。 即使 URL 顯示/ /lead-manager

希望這很清楚

Answer 1

為了正確使用歷史記錄，您需要在層次結構中使用路由器包裝 App 組件。 由於您在 App 組件中渲染路由器，因此它無法監聽歷史更改，因為 useHistory 提供的歷史不引用路由器使用的歷史，除非 App 組件由路由器包裝。

不要在 App 組件內渲染路由器

此外，您已將 Router 渲染為 App 組件內的 Switch 組件，您必須改為從react-router-dom導入確切的 Switch 組件

檢查下面的更新代碼

import {


    BrowserRouter as Router,
      Switch
      useHistory,
      Route,
      useLocation,
    } from "react-router-dom";

    const App = ({ confirmAuthentication }) => {
      let location = useLocation();
      let history = useHistory();

      useEffect(() => {
        async function fetchIt() {
          if (localStorage.jwt !== undefined) {
            confirmAuthentication();
          }
        }
        fetchIt();
        if (location.pathname === "/") {
          history.push("lead-manager");
        }
      }, []);
     return (
        <div>
          <Switch>
            <Route exact path="/testing">
              <TestingComponent />
            </Route>
            <PrivateRoute path="/lead-manager" component={LeadApp} />
            <Route exact path="/login">
              <LoginView />
            </Route>
          </Switch>
        </div>
      );
    }

    export default (props) => <Router><App {...props}/></Router>