react router как отобразить элемент-"внук" без ререндера родителя

Question

В главном компоненте <App /> есть хедер <Header />, в нем лежат ссылки на элементы <CommonBlock /> и <CommonBlock2 />. Если я кликаю на ссылку первого элемента — отображается <CommonBlock />, ссылку второго элемента — вместо него рендерится <CommonBlock2 />. Только один блок, хедер не пропадает. Это понятно.

Из <CommonBlock /> я хочу вызвать при клике по ссылке внутри, его дочерний элемент <FirstChild>. Как это сделать дабы при рендере дочернего элемента <CommonBlock /> не пропал?

const App = (props) => {
  return(
    <BrowserRouter>
    <div>
      <Header/>
      <Route  path ='/CommonBlock' exact render = {() => <CommonBlock/>}/>
      <Route  path ='/CommonBlock2' exact render = {() => <CommonBlock2 />}/>
    </div>
    </BrowserRouter>
  );
}

const Header = (props) => {
    return(
            <div className = {classes.Header}>
                <ul>
                    <li className={classes.listItem}>
                        <Link to = '/CommonBlock'>Ссылка один</Link>
                    </li>
                    <li className={classes.listItem}>
                        <Link to = '/CommonBlock2'>Ссылка два</Link>
                    </li>
                </ul>
            </div>
    );
}

const CommonBlock = (props) => {
    return(
        <div className={classes.block}>
            <h1>Обычный блок один</h1>
            <p>
                <Link to ="/FirstChild">Перейти к первому дочернему блоку</Link>
            </p>
        </div>  
);
}

Answer 1

Не совсем понятно что мы хотим получить в конечном результате. Решение может быть следующим:

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

const classes = {};
const App = props => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Route path="/CommonBlock" exact render={() => <CommonBlock />} />
        <Route path="/CommonBlock2" exact render={() => <CommonBlock2 />} />
        <Route
          path="/FirstChild"
          exact
          render={() => <CommonBlock showChild />}
        />
        <Route
          path="/FirstChild2"
          exact
          render={() => <CommonBlock2 showChild />}
        />
      </div>
    </BrowserRouter>
  );
};
export default App;

const Header = props => {
  return (
    <div className={classes.Header}>
      <ul>
        <li className={classes.listItem}>
          <Link to="/CommonBlock">Ссылка один</Link>
        </li>
        <li className={classes.listItem}>
          <Link to="/CommonBlock2">Ссылка два</Link>
        </li>
      </ul>
    </div>
  );
};

const CommonBlock = ({ showChild }) => {
  return (
    <div className={classes.block}>
      <h1>Обычный блок один</h1>
      <p>
        <Link to="/FirstChild">Перейти к 2 дочернему блоку</Link>
      </p>
      {showChild && <FirstChild2 />}
    </div>
  );
};
const CommonBlock2 = ({ showChild }) => {
  return (
    <div className={classes.block}>
      <h1>Обычный блок 2</h1>
      <p>
        <Link to="/FirstChild2">Перейти к 1 дочернему блоку</Link>
      </p>
      {showChild && <FirstChild2 />}
    </div>
  );
};

const FirstChild = ({}) => {
  return <div>FirstChild</div>;
};
const FirstChild2 = ({}) => {
  return <div>FirstChild2</div>;
};

БЛОГ НА HUSL

react router как отобразить элемент-"внук" без ререндера родителя

Ответы (1 шт):