Route не рендерит компонент. У Двух компонентов одинаковый путь но Route рендерит только один компонент

109
11 мая 2021, 15:50

Есть два компонента и нужно чтобы они оба рендерились по одному пути. Компонент PostWrap будет меняться а компонент People будет меняться редко. Вот код

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Header from './components/header';
import MyProfile from './containers/profile';
import PostsWrap from './containers/posts';
import People from './containers/people';
function App() {
  return (
    <div className="App">
      <Header />
      <div className="container all-center container-around">
        <MyProfile />
        <Switch>
          <Route exact path="/" component={PostsWrap}/>
          <Route exact path="/" component={People}/>
        </Switch>
      </div>
    </div>
  );
}
export default App;
Answer 1

У вас стоит атрибут exact а он рендерит только первый подходящий компонент (в вашем случае это компонент PostsWrap) для маршрута "/".

Можно решить это так:

<Route exact path='/' render={props =>
  <>
    <PostsWrap />
    <People />
  </>
} />

атрибут render в Route — функция которая должна вернуть элемент React. Будет вызвана когда удовлетворится сопоставление в path .

И отрендерит сразу два компонента PostsWrap и People

READ ALSO
Post запрос axios vue js

Post запрос axios vue js

Хочу отправить значение data_state = false на сервер после клика на картинкуКод скрипта:

103
Использование в объекте своих же свойств

Использование в объекте своих же свойств

Никак не могу понять в чём ошибка, неужели так делать нельзя

91
Ошибка с константной

Ошибка с константной

У меня есть структура, которая хранит событие и флаг является оно последним или нет

92