React路由器v6

我已经有一段时间没有接触过React了，但我想感谢并强调Shimrit Snapir的以下评论：

在React Router 6.0上，<Redirect/>更改为<Navigator/>

React路由器V4

tl:dr；

if (navigate) {
  return <Redirect to="/" push={true} />
}

简单而声明性的答案是，需要将<Redirectto={URL}push={boolean}/>与setState（）结合使用

push：boolean-如果为true，重定向将向历史中推送一个新条目，而不是替换当前条目。

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // Here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

这里有一个完整的例子。在这里阅读更多信息。

PS.该示例使用ES7+属性初始化器初始化状态。如果你感兴趣的话，也可以看看这里。

试试React Hook Router，“反应路由器的现代替代品”：

import { useRoutes, usePath, A} from "hookrouter";

要回答OP关于通过选择框链接的问题，您可以这样做：

navigate('/about');

更新的答案

我认为React Hook Router是一个很好的入门套件，帮助我学习了路由，但我后来更新了React Router，了解了它的历史和查询参数处理。

import { useLocation, useHistory } from 'react-router-dom';


const Component = (props) => {
    const history = useHistory();

    // Programmatically navigate
    history.push(newUrlString);
}

您可以将要导航到的位置推到历史位置。

这对我有效，不需要特殊进口：

<input 
  type="button" 
  name="back" 
  id="back" 
  class="btn btn-primary" 
  value="Back" 
  onClick={() => { this.props.history.goBack() }} 
/>

您还可以在无状态组件中使用useHistory钩子。文档示例：

import { useHistory } from "react-router"

function HomeButton() {
  const history = useHistory()

  return (
    <button type="button" onClick={() => history.push("/home")}>
      Go home
    </button>
  )
}

注意：在中添加了挂钩react-router@5.1.0并且需要反应@>=16.8

要将withRouter与基于类的组件一起使用，请尝试以下操作。不要忘记将导出语句更改为与Router一起使用：

从“react router dom”导入｛withRouter｝

class YourClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    )
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    )
  }
}

export default withRouter(YourClass);

更新：2022：使用useNavigate的React Router v6.6.1

useHistory（）钩子现已弃用。如果您使用的是React Router 6，编程导航的正确方法如下：

import { useNavigate } from "react-router-dom";

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

带挂钩的React Router v5.1.0

如果您使用的是React>16.8.0和功能组件，则React Router>5.1.0中有一个新的useHistory钩子。

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

反应路由器v4

使用React Router的v4，有三种方法可以用于组件内的编程路由。

使用withRouter高阶组件。使用合成并渲染<Route>使用上下文。

React Router主要是历史库的包装器。历史记录处理与浏览器窗口的交互。历史记录为您提供浏览器和哈希历史记录。它还提供了一个内存历史，对于没有全局历史的环境非常有用。这在使用Node进行移动应用程序开发（react native）和单元测试时特别有用。

历史记录实例有两种导航方法：推送和替换。如果您将历史记录视为一个访问位置数组，push将向数组中添加一个新位置，replace将用新位置替换数组中的当前位置。通常，您在导航时需要使用push方法。

在React Router的早期版本中，您必须创建自己的历史实例，但在v4中，<BrowserRouter>、<HashRouter>和<MemoryRouter>组件将为您创建浏览器、哈希和内存实例。React Router使与路由器关联的历史实例的财产和方法通过路由器对象下的上下文可用。

1.使用withRouter高阶组件

withRouter高阶组件将注入历史对象作为组件的属性。这允许您访问push和replace方法，而不必处理上下文。

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

2.使用合成并渲染<Route>

<Route>组件不仅仅用于匹配位置。您可以渲染无路径路线，它将始终与当前位置匹配。<Route>组件传递与withRouter相同的属性，因此您可以通过历史属性访问历史方法。

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

3.使用上下文*

但你可能不应该

最后一个选项是只有当您觉得使用React的上下文模型时才应该使用的选项（React的context API在v16中是稳定的）。

const Button = (props, context) => (
  <button
    type='button'
    onClick={() => {
      // context.history.push === history.push
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
)

// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

1和2是实现的最简单的选择，因此对于大多数用例来说，它们是最好的选择。