reactjs - react Route v4中是否有onChange的替换参数

Question

typescript -React Js：我尝试使用 onChange Propriete，但出现以下问题：没有重载匹配此调用。

<HashRouter>
            <Switch>
                <Route
                    path="/"
                    **onChange={() => {**
                        if (!authstore.isLoggedIn && (location as any).pathName !== "/login") {
                            authstore.checkLogin();
                        }
                    }}
                >
                    <div>Hallo.</div>
                    <Route exact path="/" component={() => <Index />} />

                    <Route path="/login" component={() => <Login />} />

                    <Route path="/deployment/deploymentprojects" component={() => <DeploymentProjectsPageflow />} />
                    <Route path="/deployment/deploymenttypes" component={() => <DeploymentTypesPageflow />} />
                    <Route path="/deployment/sonarqube/qualitygates" component={() => <QualityGatePageflow />} />
                    <Route path="/deployment/sonarqube/qualityprofiles" component={() => <QualityProfilePageflow />} />
                    <Route path="/deployment/sonarqube/projecttags" component={() => <ProjectTagPageflow />} />

                    <Route path="/deployment/dependencies" component={() => <DependenciesTable />} />
                    <Route path="/deployment/rollout/release" component={() => <Release />} />
                    <Route path="/deployment/rollout/patch" component={() => <Patch />} />
                    <Route path="/antd" component={() => <AntdLink />} />
                    <Route path="/kafka" component={() => <KafkaView />} />

                    <Route path="/pageFlow" component={() => <MyPageflow />} />
                    <Route
                        path="/antd/components/:component"
                        component={(parameter: any) => <AntRouter params={parameter} />}
                    ></Route>
                    <Route path="/antd/:component" component={(parameter: any) => <AntRouter params={parameter} />}></Route>
                </Route>
            </Switch>
        </HashRouter>

请帮我在反应路由器 v4 中找到 onChange 参数的替代解决方案

标签： reactjstypescriptreact-router-v4

Answer 1

您可以将 与 结合useLocation使用useEffect：

https://reactrouter.com/web/api/Hooks/uselocation

https://reactjs.org/docs/hooks-effect.html

import React, { useEffect } from "react";
import { HashRouter, Switch, Route, useLocation } from "react-router-dom";

const YourWrapper = () => {
  const location = useLocation();

  useEffect(() => {
    if (!authstore.isLoggedIn && location.pathname !== "/login") {
      authstore.checkLogin();
    }
  }, [location]);

  return (
    <HashRouter>
      <Switch>
        <div>Hallo.</div>
        <Route exact path="/" component={() => <Index />} />

        <Route path="/login" component={() => <Login />} />

        <Route
          path="/deployment/deploymentprojects"
          component={() => <DeploymentProjectsPageflow />}
        />
        <Route
          path="/deployment/deploymenttypes"
          component={() => <DeploymentTypesPageflow />}
        />
        <Route
          path="/deployment/sonarqube/qualitygates"
          component={() => <QualityGatePageflow />}
        />
        <Route
          path="/deployment/sonarqube/qualityprofiles"
          component={() => <QualityProfilePageflow />}
        />
        <Route
          path="/deployment/sonarqube/projecttags"
          component={() => <ProjectTagPageflow />}
        />

        <Route
          path="/deployment/dependencies"
          component={() => <DependenciesTable />}
        />
        <Route
          path="/deployment/rollout/release"
          component={() => <Release />}
        />
        <Route path="/deployment/rollout/patch" component={() => <Patch />} />
        <Route path="/antd" component={() => <AntdLink />} />
        <Route path="/kafka" component={() => <KafkaView />} />

        <Route path="/pageFlow" component={() => <MyPageflow />} />
        <Route
          path="/antd/components/:component"
          component={(parameter: any) => <AntRouter params={parameter} />}
        ></Route>
        <Route
          path="/antd/:component"
          component={(parameter: any) => <AntRouter params={parameter} />}
        ></Route>
      </Switch>
    </HashRouter>
  );
};