Question

我对路由器的反应还很陌生，我遇到的困难也很少。我在组件内部使用历史记录没有问题。但是，我在上述组件之外有一个函数，它无法检测历史记录。我尝试了很多东西，但无济于事。它给了我一个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')
);

Answer 2

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

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

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

Answer 3

您可以使用此软件包history

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

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

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

3 个答案: