Действительно статический HTML в компонентах React

Question

Я создаю приложение React, где мне нужно обернуть множество компонентов необработанным HTML. У них нет состояния или пропускного реквизита, и я делаю это, поэтому все можно обернуть в маршрутизатор, чтобы ссылки могли правильно отображать определенные компоненты при нажатии.

Другими словами, это ...

<div class="foo">some text</div> 
<div class="bar">some more text</div> 

становится этим.

export const Foo =() => (
    <div className="foo">some text</div> 
) 

export const Bar =() => (
    <div className="bar">some more text</div> 
) 

А файл с именем App.js будет таким:

export const App = createClass({ 
    render() { 
    return (
     <div className="App"> 
     <Foo /> 
     <Bar /> 
     <SomecomponentWithprops /> 
     </div> 
    ) 
    } 
}) 

Это делает работу и правильно оборачивает все вещи в <Router /> так, как мне нужно, но это не кажется правильным. Просто интересно, есть ли лучшая практика/более динамичный способ?

Answer 1

Это путь. Если вы хотите отображать определенный контент на определенных маршрутах, вы должны разделить его на разные компоненты, как вы это делали.