React Router размещает компонент в определенном div при маршрутизации

Question

Используя реагирующий маршрутизатор, как мне разместить компонент в определенном div?В настоящее время он рендерит ниже последнего отображаемого компонента в конце страницы?

Answer 1

Как вы уже упоминали, вы используете response-router v4. Вы можете разместить компонент Route в любом месте вашего компонента, вложенные маршруты могут быть записаны в дочернем компоненте

Например,

Скажитеу вас есть компонент приложения, такой как

class App extends React.Component {
    render() {
         return (
              <div>
                  <Navbar/>
                  <Route exact path="/" component={Home} />
                  <Route path ="/roster" component={Roster}
              </div>
         )
    }
}

Теперь скажите, что если компонент Roster содержит вложенные маршруты, вы можете поместить компонент Route в любое место для рендеринга дочерних маршрутов

const Roster = () => (
    <div>
        <Route exact path="/roster" component={ListComp} />
        <div className="rosterDetails">
            <Route exact path="/roster/:rosterId" component={Details} />
        </div>
    </div>
)