如何使用 withRouter 外部组件使用历史记录

IT技术 javascript reactjs
2021-05-14 14:15:21

我对react-router很陌生，我遇到的困难很少。我在组件内使用历史记录没有问题。但是，我在上述组件之外有一个函数，它无法检测历史记录。我尝试了很多东西，但无济于事。它给了我一个history is undefined错误

用户头像.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)

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

3个回答

您可以使用历史库在组件树之外手动创建历史并将其提供给您的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')
);

问题在于退出函数定义。您正在将历史记录作为函数的局部变量。从注销方法中删除参数历史记录。这至少应该有助于正确打印。

const signOut = () => { // remove hestory from hear as its a globally available.

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

你可以使用这个包 history

将其导入到您的文件中 import { createBrowserHistory } from 'history'；然后像这样使用它

createBrowserHistory().push('/'); 然后你可以重新加载dom window.location.reload();`

其它你可能感兴趣的问题
上一篇如何使用draft.js 更改光标位置？ 下一篇如何在react js中显示所选项目？