React Routing по-прежнему показывает корневой компонент даже после использования точного

Question

Я все еще новичок в React. Поэтому здесь я выполняю рендеринг корневого компонента с двумя маршрутами: Home и About, расположенными в функциональных компонентах: home.js и about.js соответственно. Однако даже после использования атрибута точный и корневой компонент продолжает рендеринг выше. Я до сих пор не могу понять, как не визуализировать корневой компонент при перенаправлении на любой из упомянутых маршрутов?

Вот демо: https://codesandbox.io/s/vmz6zwq0k7

Answer 1

Маршрутный компонент действует как «заполнитель» для компонента, который вы хотите отобразить при совпадении URL. все выше этого (родители и родные братья) не будут затронуты.

Данный пример кода:

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Link to="/home"> Home </Link>{" "}
          |
          <Link to="/about"> About Us </Link>{" "}
          <div>
            <Route exact path="/home" component={Home} />
            <Route exact path="/about" component={About} />
          </div>
        </div>
      </BrowserRouter>
    );
  }

Эта строка кода:

<Route exact path="/home" component={Home} />

Является только "заполнителем" для компонента Home. Он ничего не рендерит, только когда path соответствует "/home".

Когда path будет совпадать, компонент Route отобразит переданный компонент, в данном случае компонент Home.

Это не повлияет на все дерево приложений, и на то есть веская причина!
Если все приложение будет перерисовано и заменено компонентом Home, вы потеряете навигационные ссылки.