以编程方式导航到不同的路由并传递查询

时间:2016-06-08 15:49:22

标签: javascript reactjs react-router

我目前正在查看react-router的github page

中的示例

JS

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link } from 'react-router'

const User = ({ params: { userID }, location: { query } }) => {
  let age = query && query.showAge ? '33' : ''

  return (
    <div className="User">
      <h1>User id: {userID}</h1>
      {age}
    </div>
  )
}

const App = ({ children }) => (
  <div>
    <ul>
      <li><Link to="/user/bob" activeClassName="active">Bob</Link></li>
      <li><Link to={{ pathname: '/user/bob', query: { showAge: true } }} activeClassName="active">Bob With Query Params</Link></li>
      <li><Link to="/user/sally" activeClassName="active">Sally</Link></li>
    </ul>
    {children}
  </div>
)

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="user/:userID" component={User} />
    </Route>
  </Router>
), document.getElementById('example')) 

HTML

<!doctype html public "restroom">
<title>Query Params Example</title>
<base href="/query-params"/>
<link href="/global.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Query Params</h1>
<div id="example"/>
<script src="/__build__/shared.js"></script>
<script src="/__build__/query-params.js"></script>

这符合我的一个要求(传递在url中不可见的查询),但它只显示通过jsx标记的实现。我需要以编程方式重定向到我的组件的路由,让我们说重定向到/example-route页面并查询showMenu: true,这是否可以实现?

1 个答案:

答案 0 :(得分:1)

您可以使用this.props.router.push来实现这一目标。

像这样的东西

this.props.router.push({
  pathname: '/example-route',
  query: { showMenu: true }
})

假设您已使用withRouter将路由器注入道具。

React Router Documentation