gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:46:41 26 4
gpt4 key购买 nike

我目前正在查看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,这可以实现吗? p>

最佳答案

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

类似这样的事情

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

假设您已使用 withRouter 将路由器作为 props 注入(inject)。

React Router Documentation

关于javascript - 以编程方式导航到不同的路线并传递查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37707267/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com