Question

我尝试了所有可能的版本，但goBack（）按钮不起作用。不知道我在做什么错，但我正在遵循以下解决方案：

react-router (v4) how to go back?

无论如何，这里是我正在尝试的代码，我感觉与HashRouter有关。另外，如何将按钮放在导航栏中而不是在App中调用？

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>

Answer 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>
));

Answer 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

goBack（）按钮不起作用。 HashRouter反应

2 个答案: