Как визуализировать компонент из React Route в другой div, чем root - PullRequest
Новая
       29

Как визуализировать компонент из React Route в другой div, чем root

0 голосов
/ 11 февраля 2020

У меня есть основной компонент приложения с маршрутизатором реакции: 

function App() {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route path="/screenings" exact component={SPT} />
        <Route path="/registerpage" exact component={RegisterPage} />
        <Route path="/loginpage" exact component={LoginPage} />
        <Route path="/logout" exact component={LoginPage} />
      </Switch>
    </Router>
  );
}

В основном индексе. js Я отображаю этот компонент: 

ReactDOM.render(<App />, document.getElementById('root'));

В настоящее время, когда я нажимаю на любую ссылку в навигации bar/route компонент, связанный с маршрутизатором, отображается прямо под панелью навигации в элементе root div. Однако я хотел бы отобразить эти компоненты в mainpage div, который установлен ниже root div, чтобы навигационная панель и остальная часть страницы были четко разделены (помещены в 2 разных div). Есть ли способ сделать это?

1 Ответ

0 голосов
/ 11 февраля 2020

Я бы не сказал, что было бы невозможно получить содержимое в mainpage, если бы этот элемент был ниже элемента root, но вы бы сделали это излишне сложным.

Если ситуация такова, что вы хотите разделить их на два разных элемента div, почему бы вам просто не обернуть переключатель в элемент div? Таким образом, каждый маршрут будет отображаться в элементе <div id='mainpage'>. 

function App() {
  return (
    <Router>
      <NavBar />
      <div id='mainpage'>
        <Switch>
          <Route path="/screenings" exact component={SPT} />
          <Route path="/registerpage" exact component={RegisterPage} />
          <Route path="/loginpage" exact component={LoginPage} />
          <Route path="/logout" exact component={LoginPage} />
        </Switch>
      </div>
    </Router>
  );
}
...