Реактивный маршрутизатор -не рендерится, когда <Link>не в том же компоненте

Question

я пытаюсь отформатировать мой HTML примерно так в теге body:

<header id="header"></header>

<main id="app"></main>

<footer id="footer"></footer>

причина, по которой у меня навигация из <main></main> и <header></header>

Я также отрисовываю соответствующий компонент React индивидуально, то есть: document.getElementById("header"), document.getElementById("app") ...:

ReactDOM.render(
  <Header />,
  document.getElementById("header")
);

При нажатии <Link to="/log-in"></Link> в <Header /> он выходит из SPA и переходит к /log-inстр.

Что мне здесь не хватает?

Answer 1

Использование ReactDOM.render несколько раз создаст отдельные экземпляры, не подозревающие друг друга source .

Давайте продолжим реструктуризацию, которая немного улучшит ваше приложение:

App.js

import React from 'react';
import { Main } from './components';
const App = () => (
    <Main />
)

ReactDOM.render(<App />, document.getElementById("app"));

Main.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { Header, Login, Register, Home } from './components'

const Main = () => (
 <Router>
    <React.Fragment>
      <Header />

      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />

      <Footer />
    </React.Fragment>
  </Router>
)

export { Main };

Таким образом, мы когда-либо реально только отрисовываем одинпример.Ваш верхний / нижний колонтитул будет размещен за пределами маршрутизатора, поэтому при изменении маршрута они остаются неизменными.Имейте в виду, что это будет проблемой, например, если вы хотите, чтобы ваш заголовок выделил, какой маршрут активен, самый простой способ, поскольку он находится за пределами маршрутизатора и не получает от него реквизиты, это проверить URL.Также обратите внимание, что мы используем <React.Fragment> здесь, но вы можете использовать <div> или что-либо еще, что вам нравится.Маршрутизатор ожидает только одного дочернего элемента, поэтому, если вам не нужны дополнительные HTML-элементы, вы можете использовать фрагмент!