陣營路由器連接，通過在PARAMS

如果你有一個途徑，如：陣營路由器連接，通過在PARAMS

<Route path="https://stackoverflow.com/users/:userId" />

然後您導出路徑，因此它可以在你的應用程序中使用，如：

export const MY_ROUTE = '/users/:userId/'; 

<Route path={MY_ROUTE} />

如何動態設置鏈接中的參數？即我想做到這一點：

<Link to={MY_ROUTE} params={{userId: 1}} />

但params爲完全忽略......和查詢只是讓查詢不設置了一個param ...任何想法（用戶ID =？）？

來源

2016-06-28 Elliot

你什麼意思通過設置帕拉姆動態？當你點擊'/ users/123'時，路由應該會自動匹配。 –

從React Router official docs摘自：

從升級指南從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' } }}/> 

不幸的是，有一個爲傳遞一個param對象不支持，你自己看到了。

爲了動態地使用你所提出的路線，你必須做的線沿線的東西：

<Link to={ MY_ROUTE.replace(':userId', '<someUserIdFromSomewhere>') }/>

或者，你可以通過，而不是出口的MY_ROUTE字符串進一步優化，你可以導出userLink功能，例如：

function userLink(userId) { 
    return `/users/${userId}/`; 
}

，然後使用無論你想使用一個Link的路線。

下面你可以找到支持的參數和API暴露了Link組件上：

Router Link API

來源

2016-06-28 20:45:34

你可以嘗試使用[url-pattern]（https://www.npmjs.com/package/url-pattern）來構建你的url：'path = {new UrlPattern（MY_ROUTE）.stringify（{userId：1}）}'。這不是一個完美的比賽，但對於簡單的路線它可以工作 – Brandon

感謝這是一個很好的解決方法！ – Elliot

你可以創造出插值userId參數去創建路由功能，是這樣的：

export const MY_ROUTE = (userId) => `/users/${userId}/`; 

<Route path={MY_ROUTE(':userId')} />

等等你的組件

<Link to={MY_ROUTE(1)} params={{userId: 1}} />

嘗試這種解決方案在這裏： https://jsbin.com/pexikoyiwa/edit?js,console

來源

2016-06-28 20:57:05 NickGnd

我知道這是一個老問題，但與之反應路由器V4可以使用path-to-regexp包，它也被用於通過陣營路由器V4。

例子：

import {Link} from 'react-router-dom'; 
import {compile} from 'path-to-regexp'; 

const MY_ROUTE = '/users/:userId/'; 
const toPath = compile(MY_ROUTE); 

// Now you can use toPath to generate Links dynamically 
// The following will log '/users/42' to the console 
console.log(toPath({ userId: 42 }));

當然你也可以使用toPath方法來創建適當的鏈接，以及，例如：

<Link to={toPath({ userId: 42 })}>My Link</Link>

來源

2017-06-22 12:58:32 bummzack

陣營路由器連接，通過在PARAMS

回答

相關問題