reactjs - 从 react-router 导入 browserHistory

Question

我正在尝试导入 browserHistory，但出现类似这样的错误。

 ./src/App.js
  Attempted import error: 'browserHistory' is not exported from 'react- 
  router'.

我的代码是:

import React, { Component } from "react";
import { browserHistory } from "react-router";

import App from "./App";
class Home extends Component {
 home = () => {
browserHistory.push("/home");
  };
    state = {};
  render() {
    return <button onClick={this.home} className="btn btn-outline-light">
            Logout
          </button>;
 }

Answer 1

据我了解，您的主要目的是以正确的方式更改浏览器 URL，而不是实际导入 browserHistory

对于 react-router v4:

你应该从 HOC withRouter 中受益。以下一种方式应用它，这会将一些额外的 Prop 传递到您的组件中，这些 Prop 将允许浏览浏览器历史记录

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

class Home extends Component {
   home = () => { 
      // - you can now access this.props.history for navigation
      this.props.history.push("/home");
   };

   render() {
       return ( 
           <button onClick={this.home} className="btn btn-outline-light">
            Logout
          </button>;
       )
}

const HomeWitRouter = withRouter(Home);

对于 react-router v5 和 React Hooks，这可能看起来像:

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

export const Home = () => {
  const history = useHistory();
  const goHome = () => { 
    history.push("/home");
  };

  return ( 
    <button onClick={goHome} className="btn btn-outline-light">
      Logout
    </button>;
  )
}