如何访问 BrowserRouter 之外的 BrowserRouter 历史记录？

Question

下面是我的简化代码片段。（使用 react-router-v5）我的问题是如何在 logout_Handler() 中访问 BrowserRouter 的历史记录，因为我在 BrowserRouter“外部”？

我看过这个回答，但也有适用于我的情况的评论： “当我尝试使用此处所示的“withRouter”时，出现错误

You should not use <Route> or withRouter() outside a <Router>

如果我尝试在 App.js 级别使用 withRouter，这正是我得到的结果。

// App.js

function App(props) {

    const logout_Handler = (e) => {

        localStorage.removeItem("app-tokenObj");

        // how to get the history from BrowserRouter to redirect?!
        //history.push("/login") ?? NO IDEA ??

    }

    return (
        <BrowserRouter>
            <nav>
                <h3>My Supa Dupa App</h3>

                <Link to="/">Home Page</Link>
                <Link to="/admin">Admin Page</Link>
                <button type="button" onClick={logout_Handler}>Logout</button>
            </nav>
            
            <hr/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/link1" component={Comp1} />
                <Route path="/link2" component={Comp1} />
                <Route path="/login" component={Login} />
                <Route path="/signup" component={Signup} />
            </Switch>

        </BrowserRouter>
    )
}

Answer 1

如果您尝试访问 App 组件中的部分路由上下文，那么提供上下文的路由器需要在 ReactTree 中更高。解决方法很简单。在您的应用代码中将 BrowserRouter 移至高于 App 的位置。将 App 包装在 BrowserRouter 中就足够了。

示例index.js

ReactDOM.render(
  ...
    <BrowserRouter>
      <App />
    </BrowserRouter>
  ...,
  root,
);

应用程序

App 组件现在有可用的路由上下文。虽然您可以使用 withRouter 高阶组件，但使用 useHistory 挂钩会更简单。

import { Link, Route, useHistory } from 'react-router-dom';

function App(props) {
  const history = useHistory();

  const logout_Handler = (e) => {
    localStorage.removeItem("app-tokenObj");
    history.push("/login");
  }

  return (
    <>
      <nav>
        <h3>My Supa Dupa App</h3>

        <Link to="/">Home Page</Link>
        <Link to="/admin">Admin Page</Link>
        <button type="button" onClick={logout_Handler}>Logout</button>
      </nav>
            
      <hr/>
      <Switch>
        <Route path="/link1" component={Comp1} />
        <Route path="/link2" component={Comp1} />
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        <Route path="/" component={Home} />
      </Switch>
    </>
  );
}

如何访问 BrowserRouter 之外的 BrowserRouter 历史记录？

How to access BrowserRouter history outside of BrowserRouter?

react-router

react-router-dom

react-router-v5