栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在Link react-router中传递道具

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在Link react-router中传递道具

此行缺失

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)


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/416070.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号