React Router 使用location对象。location对象的属性之一是state。

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

在导航到的页面上，当前location将被注入到路由匹配的组件中，因此您可以使用this.props.location.state.

要记住的一件事是，state如果用户直接导航到页面，则没有，因此当数据不存在时，您仍然需要某种机制来加载数据。

当前的答案已经过时。

react-router 6：

使用useNavigate钩子：

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

然后，您可以通过useLocation钩子访问“/other-page”中的状态数据：

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

react-router 4 或 5：

调用 history.push，并传递一个对象作为第二个参数来传递状态：

props.history.push('/other-page', { id: 7, color: 'green' }))

然后，您可以通过以下方式访问“/other-page”中的状态数据：

props.location.state

您可以使用 react-router-dom 的 useHistory 钩子。

下面的代码是让您将数据传递到指定的路线，即"/dashboard"。

let history = useHistory();

history.push({
            pathname: '/dashboard',
            state:{
                tags: 'your-value' 
            }
    });

从 “/dashboard”你可以使用 useHistory() 来接收上述数据。

下面的代码用于接收您的数据。

const Dashboard =()=>{

 let {location} = useHistory();

 return (<>{location.state.tags}</>)
}

对于功能组件，react-router-dom:^5.2.0让我们举一个非常简单的例子来使概念精确

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

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

  const goToReceiver = () => {
    history.push("/receiver", { name:'Mr',age:23 });
  }

  return <button onClick={goToReceiver}>Go To Receiver</button>
  }

现在让我们看看数据是怎么来的 receiver route

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

  function Receiver(){ 
  
  const location = useLocation();

    return <div>
             <p>{location.state.name}</p>
             <p>{location.state.age}</p>
           </div>
  }

在react-router中以编程方式导航时传递查询参数

可以使用 history.push 和 history.replace 以编程方式使用历史对象来更改当前位置。

    history.push('/home?the=query', { some: 'state' })

如果我们将历史对象作为props传递给组件。然后我们可以使用历史对象上可用的react-router方法以编程方式导航。

现在让我们假设您将历史对象作为名为“路由器”的props传递下去。因此，它将在具有基于类的语法的组件内引用，例如：

this.props.router

使用推送或替换时，您可以将 URL 路径和状态指定为单独的参数，也可以将所有内容包含在一个类似位置的对象中作为第一个参数。

this.props.router.push('/some/path?the=query')

或者您可以使用一个类似位置的对象来指定 URL 和状态。这相当于上面的例子。

this.props.router.push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

注意 - 当然要确保 this.props.router 实际上是来自 react-router api 的历史对象。