React中的路由匹配

我想用url來製作一個頁面，其中userId將會是（java，cpp，c）。所以如果在主頁上點擊java按鈕，它將打開一個網頁users/java，類似於c和cpp.All這些網頁將有不同data.For相同的佈局這個我做了一個簡單的組件爲Lang.jsxReact中的路由匹配

export class Lang extends Component{ 
    render() { 
    const { data } = this.props; 
    return (
     <div> 
     <h1>{data.lang}</h1> 
     </div>); 
    } 
}

在Router類我們寫的東西作爲

<Route path="users/:userId" component={Lang} />

但目前尚不清楚如何在路由器和012中通過爲每個網址加載Lang？

來源

2017-03-28 oxy_js

使用鏈接，這些Java，CPP，C，像這樣：

<Link to='users/java'>Java</Link> 
<Link to='users/cpp'>Cpp</Link> 
<Link to='users/c'>C</Link>

如果您正在使用history.push()然後寫這樣的：

hashHistory.push('users/java');

注意：您可以使該用戶ID可選因爲如果你沒有通過userid它不會匹配任何路線，請這樣寫它以使其成爲可選：

<Route path="users/(:userId)" component={Lang} />

現在，如果你不通過任何事情，那麼它也會打開Lang頁面。

因爲您通過名稱userId傳遞參數還有一件事，所以它可以通過this.props.params.userId而不是this.props.data.lang。

來源

2017-03-28 05:38:52

我不能完全確定你想在這裏做什麼，但如果你在this.props看看郎的裏面，會有一個params鍵（this.props.params），這將是包含userId的對象。

如：

this.props = { 
    params: { 
    userId: '1234', 
    }, 
}

這意味着，當你去/user/1234，該userId關鍵將有1234值。

我真的不知道你期待什麼樣的data.lang值是。你是否在提供道具的另一條路線中包裝路線？你用什麼庫來朗？

來源

2017-03-28 05:37:16 David

React中的路由匹配

回答

相關問題