通配符陣營，路由器4基名

Question

在陣營，路由器4，我在配置basename像這樣：

<BrowserRouter basename="/aaaa/bbbb/*/cccc"> 

哪裏*可以是任意整數。然而，這是行不通的 - 我的語法錯了嗎？

Answer 1

您可以創建一個數組或東西，它允許你動態地創建鏈接和路徑要素：

// create the array with the ids and the components 
const wildcards = [ 
    {id: 0, target: ComponentOne}, 
    {id: 1, target: ComponentTwo}, 
    {id: 2, target: ComponentThree} 
]; 

// now map to create the links 
{wildcards.map(e => { 
    return <Link className="btn btn-secondary" to={`/aaa/bbb/${e.id}/ccc`}>Component {e.id}</Link> 
})} 

// then the routes 
{ wildcards.map(e => { 
    return <Route path={`/aaa/bbb/${e.id}/ccc`} component={e.target} key={`component_${e.id}`}></Route> 
})} 

下面是這種方法的一個活樣本：

https://codesandbox.io/s/vyO05x2g

也作出反應路由器在Route元素中使用冒號。雖然這種方法將呈現相同的基本組件，並在一個你應該創建你的邏輯來呈現的具體數據爲特定路徑：基於評論

<Route path="/aaa/bbb/:id/ccc" component={MyBaseComponent}></Route> 

// then in the base component 
const MyBaseComponent = ({match}) => { 
    // run your logic here 
    return(
    <div>Your content depending on the match params</div> 
); 
}; 

---

編輯

，我們不在同一頁面上。 我假設你想傳遞一個不同的值，這取決於你的代碼的作用。在這種情況下，你可以使用模板文字到一個變量，道具還是國家財產傳遞給基礎路由器： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

像這樣：

<BrowserRouter basename=`/aaaa/bbbb/${wildcard}/cccc`> 

這應該通過什麼wildcard是每個渲染的組件，其上有<BrowserRouter />。