我目前正在查看react-router的github page:
中的示例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'))
<!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
,这是否可以实现?
答案 0 :(得分:1)
您可以使用this.props.router.push
来实现这一目标。
像这样的东西
this.props.router.push({
pathname: '/example-route',
query: { showMenu: true }
})
假设您已使用withRouter将路由器注入道具。