javascript - 如何在组件外部使用 withRouter 使用 history

Question

我是 React 路由器的新手，遇到的困难很少。我在组件内使用历史没有问题。但是，我在上述组件之外有一个功能，它无法检测历史记录。我尝试了很多东西但无济于事。它给我一个 history is undefined 错误

UserAvatar.js

import {withRouter} from "react-router-dom";

const signOut = (history) => {

    console.log(history);
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    history.replace('/sign-in');
};


export class UserAvatar extends Component {
    render() {
        const content = (
            <div>
                <p>Content</p>
                <Button className="sign-out" onClick={() => signOut(this.props.history)}>Sign-out</Button>
            </div>
        );

export default withRouter(UserAvatar, signOut)

任何想法都会有很大帮助谢谢!

Answer 1

您可以使用 history库在组件树之外手动创建历史并将其提供给 Router 组件。这样您就可以在任何需要的地方导入 history 对象。

示例

// history.js
import { createBrowserHistory } from 'history';

export default createBrowserHistory();

// index.js
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Router history={history}>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/user">User</Link></li>
      </ul>
      <Route exact path="/" component={HomePage} />
      <Route path="/user" component={UserAvatar} />
    </div>
  </Router>,
  document.getElementById('root')
);