无法在反应中重定向

Question

我有一个应用程序组件，如果条件不满足，我想在它从那里着陆后进行重定向，并在完成渲染时渲染另一个组件，但不知何故，当我转到 "path/myURl" 我不查看我的<Home> 组件：

const App: FunctionComponent<{}> = () => {
  useEffect(() => {
    if (!localstorage.getItem("token")) {
      window.location.replace("/myUrl");
    }
  }, []);

  return (
    <>
      <Route
        exact
        path="/myUrl"
        render={() => <Home />}
      />
    </>
  );
};
export default App;

首页组件：

const Home: FunctionComponent<{}> = () => {
  return <> Hello</>
}

索引页面：

class WebComponent extends HTMLElement {
  render() {
    ReactDOM.render(
      <root.div style={{ all: "initial" }}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </root.div>,
      this
    );
  }

  connectedCallback(): void {
    this.render();
  }
}

Answer 1

通常在 React 应用中有更好的重定向方式。我会为此目的使用 useHistory 钩子，因为你有一个函数组件。

尝试如下：

import { useHistory } from 'react-router-dom'

const App: FunctionComponent<{}> = () => {
   const history = useHistory();

   useEffect(() => {
    if (!localstorage.getItem("token")) {
      history.push('/myUrl');
    }
   }, []);

   // return
}

此外，您还应该使用<Router> 和<Switch> 组件包装组件以使其工作。

如果您对表示 React Apps 的不同编程可能重定向选项的更多选项感兴趣，请查看我的 GitHub 存储库：
https://github.com/norbitrial/react-router-programmatically-redirect-examples

我希望这会有所帮助！

Answer 2

使用反应路由器：

class WebComponent extends HTMLElement {
  render() {
    ReactDOM.render(
      <root.div style={{ all: "initial" }}>
        <BrowserRouter>
          <Switch>
          <Route
            exact
            path="/myUrl"
            render={() => <Home />}
          />
          <Route
            path="/-"
            render={() => <App />}
          />
          </Switch>
        </BrowserRouter>
      </root.div>,
      this
    );
  }

  connectedCallback(): void {
    this.render();
  }
}

// Your App component


import { useHistory } from 'react-router-dom'

const App: FunctionComponent<{}> = () => {
   const history = useHistory();

   useEffect(() => {
    if (!localstorage.getItem("token")) {
      history.push('/myUrl');
    }
   }, []);

   // return
}