在链路路由器中传递道具

作者

我正在使用react with react路由器。
我正试图在react路由器的“链接”中传递属性

var React=require（'React'）；
var-Router=require（'react-Router'）；
var CreateIdeaView=require（'./components/CreateIdeaView.jsx'）；
var-Link=路由器.Link；
var-Route=路由器.Route；
var DefaultRoute=Router.DefaultRoute；
var RouteHandler=Router.RouteHandler；
var App=React.createClass({
render:function（）{
返回(
&lt；div&gt；
&lt；Link to=“ideas”params={{{testvalue:“hello”}}&gt；创建Idea&lt；/Link&gt；
&lt；RouteHandler/&gt；
&lt；/div&gt；
);
}
});
变量路由=(
&lt；Route name=“app”path=“/”handler={app}&gt；
&lt；Route name=“ideas”handler={CreateIdeaView}/&gt；
&lt；DefaultRoute处理程序={Home}/&gt；
&lt；/Route&gt；
);
Router.run（路由、函数（处理程序）{
React.render（&lt；Handler/&gt；，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
返回(
&lt；div&gt；
&lt；h1&gt；创建帖子：&lt；/h1&gt；
&lt；input type='text'ref='newIdeaTitle'占位符='title'&gt；&lt；/input&gt；
&lt；input type='text'ref='newIdeaBody'占位符='body'&gt；&lt；/input&gt；
&lt；/div&gt；
);
}
});
module.exports=CreateIdeaView；

如何使用“链接”传递数据

此行缺少路径：

&lt；路由名称=&quot；“想法”；handler={CreateIdeaView}/&gt；

应该是：

&lt；路由名称=&quot；“想法”；路径=“/”：“测试值”；handler={CreateIdeaView}/&gt；

给定以下链接（过时的v1）：

&lt；链接到；“想法”；params={{testvalue:&quot；hello&quot；}}}&gt；创造理念&lt/链接&gt；

自v4/v5起的最新版本：

const backUrl='/some/other/value'
//this.props.testvalue===”的；“你好”；
//使用查询
&lt；链接到={{pathname:`/${this.props.testvalue}`，查询：{backUrl}}/&gt；
//使用搜索
&lt；链接到={{pathname:`/${this.props.testvalue}`，搜索：`？backUrl=${backUrl}`/&gt；
&lt；链接到={`/${this.props.testvalue}？backUrl=${backUrl}`}/&gt；

在withRouter（CreateIdeaView）组件渲染（）中，使用withRouter高阶组件的过时用法：

console.log（this.props.match.params.testvalue、this.props.location.query.backurl）
//输出
你好/一些/其他/价值观

在使用useparms和useLocation挂钩的功能组件中：

const createdDeaView=（）=&gt{
const{testvalue}=useParams（）；
const{query，search}=useLocation（）；
log（testvalue，query.backUrl，新的URLSearchParams（search.get（'backUrl'））
返回&lt；span&gt；{testvalue}{backurl}&lt；/span&gt；
}

从您在文档上发布的链接，指向页面底部：

给定一个类似于的路由&lt；路由名称=&quot；用户&quot；路径=&quot；/users/:userId&quot；/&gt；

使用一些存根查询示例更新了代码示例：

//从“React”导入React、{Component、Props、ReactDOM}；
//从“反应路由器”等导入{Route，Switch}
//此代码段自在浏览器中运行以来已将其全部附加到窗口
常数{
浏览器路由器，
转换
路线
链接
导航链接
}=反应路线图；
类世界扩展了React.Component{
建造师（道具）{
超级（道具）；
console.dir（道具）；
此.state={
fromIdeas:props.match.params.WORLD | | |“未知”
}
}
render（）{
const{match，location}=this.props；
返回(
&lt；反应碎片&gt；
&lt；h2&gt；{this.state.fromIdeas}&lt；/h2&gt；
&lt；span&gt；事物：
{location.query
&amp&amp；location.query.thing}
&lt；/span&gt；&lt；br/&gt；
&lt；span&gt；其他1：
{location.query
&amp；&amp；location.query.another1
||'2或3的无'}
&lt；/span&gt；
&lt；/React.Fragment&gt；
);
}
}
类。组件{
建造师（道具）{
超级（道具）；
console.dir（道具）；
此.state={
fromAppItem:props.location.item，
fromAppId:props.location.id，
下一页：“世界1”，
showWorld2：错误
}
}
render（）{
返回(
&lt；反应碎片&gt；
&lt；li&gt；项：{this.state.fromAppItem.ok}&lt；/li&gt；
&lt；li&gt；id:{this.state.fromAppId}&lt；/li&gt；
&lt；li&gt；
&链接
到={{
路径名：`/hello/${this.state.nextPage}`，
查询：{thing:'asdf'，另一个1:'stuff'}
}}&燃气轮机；
家1
&lt；/Link&gt；
&lt；/li&gt；
&lt；li&gt；
&lt；按钮
onClick={（）=&gt；this.setState({
下一页：“世界2”，
showWorld2:true}）}&gt；
开关2
&lt；/button&gt；
&lt；/li&gt；
{this.state.showWorld2
&&amp；&amp；
&lt；li&gt；
&链接
到={{
路径名：`/hello/${this.state.nextPage}`，
查询：{thing:'fdsa'}}}}&gt；
家2
&lt；/Link&gt；
&lt；/li&gt；
}
&lt；NavLink to=“/hello”&gt；Home 3&lt；/NavLink&gt；
&lt；/React.Fragment&gt；
);
}
}
类应用程序扩展了React.Component{
render（）{
返回(
&lt；反应碎片&gt；
&lt；链接到={{
路径名：'/ideas/：id'，
id:222，
项目：{
好的：123
}}}&gt；创意&lt；/Link&gt；
&lt；开关&gt；
&lt；路由精确路径='/ideas/:id/'组件={ideas}/&gt；
&lt；路由路径='/hello/：WORLD？/：thing？'component={WORLD}/&gt；
&lt；/Switch&gt；
&lt；/React.Fragment&gt；
);
}
}
ReactDOM.render((
&lt；浏览器路由器&gt；
&lt；应用程序/&gt；
&lt；/BrowserRouter&gt；
)，document.getElementById（'ideas'）；
&lt；script src=”https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js“&gt；&lt；/script&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js“&gt；&lt；/script&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js“&gt；&lt；/script&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.min.js“&gt；&lt；/script&gt；
&lt；div id=“ideas”&gt；&lt；/div&gt；

#更新：

见：https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v2.0.0.md#link-使用位置描述符输入并激活

从1.x到2.x的升级指南：

&链接到&gt；、OneNet和iActive使用位置描述符

&lt；指向&gt；的链接现在可以在字符串之外使用位置描述符。
查询和状态道具已弃用

//v1.0.x

链接到=&quot；/foo&quot；查询={{{the:'query'}}/&gt；

//v2.0.0

&lt；链接到={{pathname:'/foo'，query:{the:'query'}}}/&gt；

//在2.x中仍然有效

链接到；

同样，从一个onEnter钩子重定向现在也使用一个位置
描述符

//v1.0.x

（nextState，replaceState）=&gt；replaceState（null，/foo）
（nextState，replaceState）=&gt；replaceState（null，/foo'，{the:'query'}）

//v2.0.0

（下一个状态，替换）=&gt；替换（'/foo'）
（nextState，replace）=&gt；replace（{pathname:'/foo'，query:{the:'query'}）

对于自定义链接类组件，同样适用于router.isActive，
以前的history.isActive

//v1.0.x

history.isActive（路径名、查询、索引）

//v2.0.0

router.isActive（{pathname，query}，indexOnly）

#v3到v4的更新：

  • https://github.com/ReactTraining/react-router/blob/432dc9cf2344c772ab9f6379998aa7d74c1d43de/packages/react-router/docs/guides/migrating.md

  • https://github.com/ReactTraining/react-router/pull/3803

  • https://github.com/ReactTraining/react-router/pull/3669

  • https://github.com/ReactTraining/react-router/pull/3430

  • https://github.com/ReactTraining/react-router/pull/3443

  • https://github.com/ReactTraining/react-router/pull/3803

  • https://github.com/ReactTraining/react-router/pull/3636

  • https://github.com/ReactTraining/react-router/pull/3397

  • https://github.com/ReactTraining/react-router/pull/3288

界面基本上仍然与v2相同，最好查看react router的CHANGES.md，因为这是更新的地方

面向子孙后代的“遗留迁移文档”

发表评论