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

Question

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

我已经看到了这个答案How to access history object outside <Route /> in React Router v4 ，但也有一条适用于我的案例的评论： “当我尝试使用此处所示的“withRouter”时，出现错误

您不应该在 <Router> 之外使用 <Route> 或 withRouter()

如果我尝试在 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>
    </>
  );
}