ワイルドカードがで反応-ルータ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> 
); 
}; 

---

EDIT

私たちは同じページにいませんでした。 私はあなたのコードが何をするかによって異なる値を渡したいと思っています。その場合、あなたは、ベースルータに変数、小道具や国有財産を渡すためにテンプレートリテラルを使用することができます。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

このように各のレンダリングには何でもwildcard渡す必要があります

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

コンポーネントには<BrowserRouter />が含まれています。