goBack() 按钮不起作用。 HashRouter 反应答案

【问题标题】：goBack() button doesn't work. HashRouter ReactgoBack() 按钮不起作用。 HashRouter 反应
【发布时间】：2020-05-18 10:34:12
【问题描述】：

我已经尝试了所有可能的版本，但 goBack() 按钮不起作用。不知道我做错了什么，但我正在遵循这个解决方案：

react-router (v4) how to go back?

无论如何，这是我正在尝试的代码，我觉得与 HashRouter 有一些关系。另外如何将按钮放在导航栏中而不是在应用程序中调用它？

import React from 'react';
import { HashRouter, Route, withRouter } from 'react-router-dom';
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import store from './store'
import PrivateRoute from './components/auth/PrivateRoute'


class App extends React.Component {
    constructor(props){
        super(props);
        this.goBack = this.goBack.bind(this); // i think you are missing this
    }

    componentDidMount(){
        store.dispatch(loadUser())
    }
    goBack(){
        this.props.history.goBack();
    }

    render(){
        return (
            <Provider store={store}>
                <HashRouter basename="/">
                    <Navbar />
                    <button onClick={this.goBack()}>Go Back</button>
                    <Route exact  path="/" component={Home}/>
                    <PrivateRoute path="/aeons" component={AeonsList} />
                </HashRouter>
            </Provider>

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我有一个例子。请检查一下，希望对您有所帮助。

import React from "react";
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {withRouter} from "react-router";

export default function BasicExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/about/insideabout">Inside About</Link>
                    </li>
                </ul>
                <hr/>
                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route exact path="/about">
                        <About/>
                    </Route>
                    <Route path="/about/insideabout">
                        <InsideAbout/>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

const About = withRouter(({history, ...props}) => (
    <div>
        <h1>
            About
            <hr/>
            <button onClick={() => {
                // history.push('/')
                history.goBack(-1);
            }}>go back
            </button>
        </h1>
    </div>
));

const InsideAbout = withRouter(({history, ...props}) => (
    <h1 {...props}>
        Inside About
        <hr/>

        <button onClick={() => {
            history.goBack();
        }}>go back
        </button>
        <button onClick={() => {
            history.go(-2);
        }}>go home
        </button>
    </h1>
));

【讨论】：

【解决方案2】：

这就是我解决它的方法：使用返回按钮创建另一个组件并在任何你想要的地方调用它

import React from 'react';
import { withRouter } from 'react-router';

const GoBackButton = withRouter(({history, ...props}) => (
  <div>
    <button onClick={() => {
        // history.push('/')
        history.goBack(-1);
      }}>go back
    </button>
  </div>
));
export default GoBackButton

【讨论】：