Я использую реакцию с реактивным маршрутизатором. Я пытаюсь передать свойства в "Link" реактивного маршрутизатора
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;
Как передать данные с помощью "Link"?
В этой строке отсутствует path
:
<Route name="ideas" handler={CreateIdeaView} />
Должно быть:
<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />
Учитывая следующую Link
:
<Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>
От ссылки, которую вы разместили в документации, к нижней части страницы:
Заданный маршрут, такой как
<Route name="user" path="/users/:userId"/>
Из руководства по обновлению с 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)
https://github.com/ReactTraining/react-router/pull/3288
Интерфейс в основном такой же, как и в v2, лучше всего взглянуть на CHANGES.md для реагирующего маршрутизатора, поскольку там находятся обновления.
"Документация по миграции" для потомков
есть способ передать более одного параметра. Вы можете передать "в" как объект вместо строки.
// your route setup
<Route path="/category/:catId" component={Category} / >
// your link creation
const newTo = {
pathname: "/category/595212758daa6810cbba4104",
param1: "Par1"
};
// link to the "location"
// see (https://reacttraining.com/react-router/web/api/location)
<Link to={newTo}> </Link>
// In your Category Component, you can access the data like this
this.props.match.params.catId // this is 595212758daa6810cbba4104
this.props.location.param1 // this is Par1
У меня была такая же проблема, чтобы показать детали пользователя из моего приложения.
Вы можете сделать это:
<Link to={'/ideas/'+this.props.testvalue }>Create Idea</Link>
или же
<Link to="ideas/hello">Create Idea</Link>
а также
<Route name="ideas/:value" handler={CreateIdeaView} />
чтобы получить это через this.props.match.params.value
в вашем классе CreateIdeaView.
Вы можете увидеть это видео, которое мне очень помогло: https://www.youtube.com/watch?v=ZBxMljq9GSE
как для response-router-dom 4.xx(https://www.npmjs.com/package/react-router-dom) вы можете передать параметры компоненту для маршрутизации через:
<Route path="/ideas/:value" component ={CreateIdeaView} />
связывание через (учитывая, что testValue prop передается соответствующему компоненту (например, указанному выше компоненту приложения), отображающему ссылку)
<Link to={`/ideas/${ this.props.testValue }`}>Create Idea</Link>
передача реквизитов вашему конструктору компонента, параметр param будет доступен через
props.match.params.value
Маршрут:
<Route state={this.state} exact path="/customers/:id" render={(props) => <PageCustomer {...props} state={this.state} />} />
И затем можно получить доступ к параметрам в вашем компоненте PageCustomer, например: this.props.match.params.id
.
Например, вызов API в компоненте PageCustomer:
axios({
method: 'get',
url: '/api/customers/' + this.props.match.params.id,
data: {},
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
/ideas/${this.props.testvalue}
}> {this.props.testvalue} </ Ссылка>