Question

我知道我可以访问history.goBack()返回路由器历史记录。

但是，我想创建一个具有此功能的<Link />标记，并依赖于to属性（href）来导航而不是onClick。

这可能吗？

Answer 1

我可以使用context api解决您的问题。 但我坚信使用history.goBack（）会更容易。

首先，您需要将App组件包装在路由器中：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root'),
);

然后在您的App/index.js文件中，您需要收听位置更改事件并相应地设置您的状态：

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import { withRouter } from 'react-router'

class App extends Component {
  state = { prevLocation: '' };

  // Use the context api to retrieve the value in your Link
  getChildContext = () => (
    {
      prevLocation: this.state.prevLocation,
    }
  );

 componentWillReceiveProps(nextProps) {
   if (nextProps.location !== this.props.location) {
     this.setState({ prevLocation: this.props.location.pathname });
   }
 }

 render() {
   return (
     <div>
       <Switch>
         // ...
       </Switch>
     </div>
   );
  }
}

App.childContextTypes = {
  prevLocation: PropTypes.string,
};

export default withRouter(App);

然后在in中可以创建一个GoBack组件并使用上下文API来检索前一个路径的值。

import React from 'react';
class GoBack extends React.Component {
  render() {
    return <Link to={this.context.prevLocation}>click</Link);
  }
}

GoBack.contextTypes = {
  prevLocation: PropTypes.string,
};

如何创建一个返回react-router-dom v4的链接

1 个答案: