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

Question

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

const { history } = this.context.router;

history.push(to);

这是从github repo拉出来的

所以在我的application 中它应该可以工作，因为上下文是从<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 为您提供道具的匹配、位置、历史记录。