此行缺失
path:
<Route name="ideas" handler={CreateIdeaView} />应该:
<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />鉴于以下情况
link(过时的v1) :
<link to="ideas" params={{ testvalue: "hello" }}>Create Idea</link>自v4起最新 :
const backUrl = '/some/other/value'// this.props.testvalue === "hello"<link to={{pathname: `/${this.props.testvalue}`, query: {backUrl}}} />并在
withRouter(CreateIdeaView)组件中
render():
console.log(this.props.match.params.testvalue, this.props.location.query.backurl)// outputhello /some/other/value
从您在文档上发布的链接,朝页面底部:
给定一条路线
<Route name="user" path="/users/:userId"/>
使用一些存根查询示例更新了代码示例:
// import React, {Component, Props, ReactDOM} from 'react';// import {Route, Switch} from 'react-router'; etc etc// this snippet has it all attached to window since its in browserconst { BrowserRouter, Switch, Route, link, Navlink} = ReactRouterDOM;class World extends React.Component { constructor(props) { super(props); console.dir(props); this.state = { fromIdeas: props.match.params.WORLD || 'unknown' } } render() { const { match, location} = this.props; return ( <React.Fragment> <h2>{this.state.fromIdeas}</h2> <span>thing: {location.query && location.query.thing} </span><br/> <span>another1: {location.query && location.query.another1 || 'none for 2 or 3'} </span> </React.Fragment> ); }}class Ideas extends React.Component { constructor(props) { super(props); console.dir(props); this.state = { fromAppItem: props.location.item, fromAppId: props.location.id, nextPage: 'world1', showWorld2: false } } render() { return ( <React.Fragment> <li>item: {this.state.fromAppItem.okay}</li> <li>id: {this.state.fromAppId}</li> <li> <link to={{ pathname: `/hello/${this.state.nextPage}`, query:{thing: 'asdf', another1: 'stuff'} }}> Home 1 </link> </li> <li> <button onClick={() => this.setState({ nextPage: 'world2', showWorld2: true})}> switch 2 </button> </li> {this.state.showWorld2&&<li> <link to={{ pathname: `/hello/${this.state.nextPage}`, query:{thing: 'fdsa'}}} > Home 2 </link> </li> } <Navlink to="/hello">Home 3</Navlink> </React.Fragment> ); }}class App extends React.Component { render() { return ( <React.Fragment> <link to={{ pathname:'/ideas/:id', id: 222, item: { okay: 123 }}}>Ideas</link> <Switch> <Route exact path='/ideas/:id/' component={Ideas}/> <Route path='/hello/:WORLD?/:thing?' component={World}/> </Switch> </React.Fragment> ); }}ReactDOM.render(( <BrowserRouter> <App /> </BrowserRouter>), document.getElementById('ideas'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.min.js"></script><div id="ideas"></div>更新:
参见:https :
//github.com/ReactTraining/react-
router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-
guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-
descriptors
从1.x到2.x的升级指南:
<link to>,onEnter和isActive使用位置描述符<link to>现在可以在字符串之外添加位置描述符。查询和状态道具已弃用。// v1.0.x
<link to="/foo" query={{ the: 'query' }}/>// v2.0.0
<link to={{ pathname: '/foo', query: { the: 'query' } }}/>//在2.x版本中仍然有效
<link to="/foo"/>同样,从onEnter挂钩重定向现在也使用了位置描述符。
// v1.0.x
(nextState, replaceState) => replaceState(null, '/foo')(nextState, replaceState) => replaceState(null, '/foo', { the: 'query'})
// v2.0.0
(nextState, replace) => replace('/foo')(nextState, replace) => replace({ pathname: '/foo', query: { the:‘query’ } })
对于自定义的类似链接的组件,同样适用于router.isActive,以前是history.isActive。
// v1.0.x
history.isActive(pathname, query, indexOnly)// v2.0.0
router.isActive({ pathname, query }, indexOnly)



