文字列を返す関数をreturn内で機能させたい

Question

react-routerでのルーティングを関数で共通の部分をまとめたいのですが、下の画像のようにjavascriptのコードではなく文字列としてそのままブラウザに表示されてしまいます。
関数でまとめたまま、ルーティングを機能させるにはどうすればよいのでしょうか。
ご教授おねがいいたします。

const route = (path, component) => {
    return '<Route exact path=\'/' + path + '\' component={' + component + '} />'
}
return(
    <BrowserRouter>
      <div>
        {route('', 'Top')}
        {route('secondPage', 'secondPage')}
      <div>
    <BrowserRouter>
)

Answer 1

pathはともかくcomponentは文字列ではなくコンポーネントそのものを渡す必要があると思いますが、下記の通りにすればよいのではないでしょうか？

const route = (path, component) => {
  return (
    <Route exact path={'/' + path} component={component} />
  );
}

Comments

[omyu]

ご回答ありがとうございます。

もしcomponentではなくrenderにしたいときはどのように書けばいいのでしょうか。

[omyu]

const route = (path, component) => {
return (
<Route exact path={'/' + path} render={() => <component />} />
);
}
では
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.　というエラーが起き、
const route = (path, component) => {
return (
<Route exact path={'/' + path} render={() => <{component} />} />
);
このように{}で囲うと、Syntax error: Unexpected token が起きます。

[nekoniki]

componentがJSX.Elementそのものなら、
<Route exact path={'/' + path} render={() => component} />
でいいのではないでしょうか？

[omyu]

引数に、<Top />といった形のまま渡すということでしょうか？

[nekoniki]

> 引数に、<Top />といった形のまま渡すということでしょうか？
その認識です。
仮に、出力させたい結果が
<Route exact path={'/' + path} render={() => <Top />} />
だとすれば、compoenntに渡すのは<Top />そのままだと思うので。

[omyu]

理解することができました！
ありがとうございました。