React Routeタグ内のelement属性をmap()メソッドで回してパスごとに異なるコンポーネントを表示させたい。

Question

ReactにおいてReact-router-domを用いたルーティングのリファクタリングに挑戦しております。
その中でmap()を用いて繰り返しとなる部分をまとめようと思ったのですがうまくいきません。

pathの方は渡しているのがstring型なのでうまくいっており、実際に/aboutにアクセスすることができました。
しかし肝心のelementの方は自身が期待していた<About />コンポーネントではなく、'{<About />}'というstringがわたされてしまい
/aboutにアクセスすると'{<About />}'という文字列のみが表示されてしまいます。

テンプレートリテラルの他にも+演算子での文字列連結で表現しましたがうまくいきませんでした。

どのようにすればmapメソッド内においてRouteのelement属性に対しコンポーネントをわたすことができるでしょうか？
お力添えをお願いいたします。

なおバージョンは以下のとおりです。
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.3",

以下コードとなります。

const Routing = () =>{
  return(
  <Routes>
          {['About', 'History', 'Skill', 'Work','Contact'].map(text =>
          (
          <Route path={'/'+text} element = {`{<${text} />}`} />//エレメント属性の中身がテキストになってしまう。
          ))}
  </Routes>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <BrowserRouter>
        <Routing/>

        {/* <Routes>
           <Route path="/about" element = {<About />} />
           <Route path="/history" element = {<History />} />
           <Route path="/skill" element = {<Skill />} />
           <Route path="/work" element = {<Work />} />
           <Route path="/contact" element = {<Contact />} /> 
            </ Routes>*/ }これらをRoutingコンポーネントにわけてリファクタリングしたい。


      </BrowserRouter>
      <TemporaryDrawer />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

Routeのelement属性に対しコンポーネントをわたすことができるでしょうか？

コンポーネントも変数に入れられる値ですので、その値をとってくる必要があります。

{about: About, history: History}のようなオブジェクトを用意しておいて、これを名前で引いて各コンポーネントを得るようにしましょう。

Comments

[erjkl1]

オブジェクトを用意して、一旦Object.keysでキーの配列を作成。
その配列をmapでまわしながらobject[key]でキーを変数展開することでobjectの値が得られ
無事やりたいことを達成することができました！
TSで書いていたのでobject[key]のところで
インデックスシグニチャがないと怒られましたのでそれも書きました。

ありがとうございました！

const Routing = () =>{
type routeConfig ={
[address : string]: JSX.Element;
};
const routing:routeConfig = { home:<Home />, about: <About />, history: <History />}
const componentsKey=Object.keys(routing);
return(
<Routes>
<Route path="/" element = {<Home />} />
<Route path="*" element={<NoMatch />} />
{componentsKey.map((key) =>
(
<Route path={'/'+key} element = {routing[key]} />
))}
</Routes>
)
}

Answer 2

オブジェクトを用意して、一旦Object.keysでキーの配列を作成。
その配列をmapでまわしながらobject[key]でキーを変数展開することでobjectの値が得られ
無事やりたいことを達成することができました！
TSで書いていたのでobject[key]のところで
インデックスシグニチャがないと怒られましたのでそれも書きました。

const Routing = () =>{
  type routeConfig ={
    [address : string]: JSX.Element;
  };
  const routing:routeConfig = { home:<Home />, about: <About />, history: <History />}
  const componentsKey=Object.keys(routing);
  return(
  <Routes>
          <Route path="/" element = {<Home />} />
          <Route path="*" element={<NoMatch />} />
          {componentsKey.map((key) =>
          (
          <Route path={'/'+key} element = {routing[key]} />
          ))}
  </Routes>
  )
}