History

从程序中控制路由是依靠 React Router DOM 提供的 History 对象。每个路由组件的props中都会注入一个键值为history的 History 对象，用于提供路由的控制。History 对象主要提供了以下方法来供使用。

• .length，表示 History 栈的长度。
• .action，表示导航到当前路由的操作，取值为PUSH、REPLACE或者POP等。
• .location，获取用于描述当前位置的对象。由于 History 对象是可变的，所以.location获取的当前位置描述并不可靠，可以直接访问props中的location对象代替。location对象提供了以下功能供使用：
  • .pathname，当前位置的路径。
  • .search，当前位置的查询串。
  • .hash，当前位置的 Hash 前缀。
  • .state，当前位置的状态量。可以通过 History 对象的.push(path, state)设置。
• .push(path, [state])，导航到指定位置，并向 History 栈中推入一条记录。
• .replace(path, [state])，导航到指定位置，清空 History 栈并推入一条记录。
• .go(n)，将 History 栈指针向栈顶移动 n 位，n 为负值为向栈底移动。
• .goBack()，将 History 栈指针向栈底移动一位，即后退一步。
• .goForward()，将 History 栈指针向栈顶移动一位，即前进一步。
• .block(prompt)，阻止导航并弹出提示，返回一个函数供解除阻止使用。

class CargoComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <button onClick={() => this.props.history.push('/login')}>Click Me</button>;
  }
}

注意，要从组件的props中访问 History 对象或者 Location 描述对象，组件必须是在 Route 的component中指定的路由组件。如果需要在其他组件中使用 History 对象或者 Location 描述对象，需要使用下一节中的withRouter。