javascript - 反应路由器定义我自己的链接

Question

所以<Link />处理路由器导航的 onClick 的实现很简单：

const { history } = this.context.router;

history.push(to);

这是从github repo中提取的

所以在我的应用程序中它应该可以工作，因为上下文是从<Router>组件传递下来的，对吗？

class App extends React.Component {
  constructor() {
    super(...arguments);
  }

  render() {
    const home = () => (<div>Home</div>);
    const about = () => (<div>About</div>);
    const { history } = this.context.router;

    console.log("History", history);

    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>

        <Route exact path="/" component={home} />
        <Route path="/about" component={about} />
      </div>
    )
  }
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('main')
);

但正如您在控制台输出中看到的那样，历史对象是未定义的......

Answer 1

只是为了澄清 Azium 评论：

class App extends React.Component {
  constructor() {
    super(...arguments);
  }

  render() {
    const home = () => (<div>Home</div>);
    const about = () => (<div>About</div>);
    const { history } = this.props;

    console.log("History", history);

    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>

        <Route exact path="/" component={home} />
        <Route path="/about" component={about} />
      </div>
    )
  }
}

const AppWithRouter = withRouter(App);

ReactDOM.render(
  <Router>
    <AppWithRouter />
  </Router>,
  document.getElementById('main')
);

withRouter为您提供有关道具的匹配、位置、历史记录。