我正在用react-router进行反应。我正在尝试在react-router的“链接”中传递属性
var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); var routes = ( <Route name="app" path="/" handler={App}> <Route name="ideas" handler={CreateIdeaView} /> <DefaultRoute handler={Home} /> </Route> ); Router.run(routes, function(Handler) { React.render(<Handler />, document.getElementById('main')) });
“链接”呈现页面,但不将属性传递给新视图。下面是查看代码
var React = require('react'); var Router = require('react-router'); var CreateIdeaView = React.createClass({ render : function(){ console.log('props form link',this.props,this)//props not recived return( <div> <h1>Create Post: </h1> <input type='text' ref='newIdeaTitle' placeholder='title'></input> <input type='text' ref='newIdeaBody' placeholder='body'></input> </div> ); } }); module.exports = CreateIdeaView;
如何使用“链接”传递数据?
此行缺失path:
path
<Route name="ideas" handler={CreateIdeaView} />
应该:
<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />
鉴于以下情况Link (过时的v1) :
Link
<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():
withRouter(CreateIdeaView)
render()
console.log(this.props.match.params.testvalue, this.props.location.query.backurl) // output hello /some/other/value
从您在文档上发布的链接,朝页面底部:
给定一条路线 <Route name="user" path="/users/:userId"/>
<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 browser const { 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)
从1.x到2.x的升级指南:
<Link to>,onEnter和isActive使用位置描述符
<Link to>
<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挂钩重定向现在也使用了位置描述符。
(nextState, replaceState) => replaceState(null, '/foo') (nextState, replaceState) => replaceState(null, '/foo', { the: 'query'
})
(nextState, replace) => replace('/foo') (nextState, replace) => replace({ pathname: '/foo', query: { the:
‘query’ } })
对于自定义的类似链接的组件,同样适用于router.isActive,以前是history.isActive。
history.isActive(pathname, query, indexOnly)
router.isActive({ pathname, query }, indexOnly)