React-router-dom: очень простая вложенная маршрутизация не работает

Question

Я искал различные учебники и несколько вопросов stackOverflow. И ни одна из них не помогла мне решить очень основную проблему c:
Реализация вложенных маршрутов с реакцией-router-dom
Вот мой код:

Приложение. js

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

DefaultLayout. js

 <Route path="/home/users" component={Users} />

Когда я go до / home / users , я получаю пустой экран, потому что response-router-dom ищет определение этого маршрута внутри App. js вместо поиска его внутри DefaultLayout. js ..
Итак, у меня есть два вопроса:
ВОПРОС 1: Что я делаю неправильно?
ВОПРОС 2: Как реагирует router-dom знает, что он должен искать вложенный маршрут внутри DefaultLayout. js, а не внутри App. js?

Прошло два дня, и я до сих пор не могу решить эту простую проблему.
Любая помощь очень ценится.
РЕДАКТИРОВАТЬ 1: Я начал новый проект только для ради реализации очень простой вложенной маршрутизации:

Приложение. js

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

import ParentComponent from "./nestedComponents/ParentComponent";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/home" name="Home" component={ParentComponent} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ParentComponent. js

import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";

export default function ParentComponent() {
  return (
    <div>
      PARENT COMPONENT
      <Switch>
        <Route path="home/nestedComponentOne" component={nestedComponentOne} />
        <Route path="home/nestedComponentTwo" component={nestedComponentTwo} />
      </Switch>
    </div>
  );
}

nestedComponentOne. js

import React from "react";

export default function nestedComponentOne() {
  return <div>NESTED COMPONENT 1</div>;
}

nestedComponentTwo. js

import React from "react";

export default function nestedComponentTwo() {
  return <div>NESTED COMPONENT 2</div>;
}

Но я все еще когда я пытаюсь получить доступ к вложенному компоненту, появляется пустой экран ...

Answer 1

У вас есть эта проблема:

URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

Самое простое решение - заменить BrowserRouter на HashRouter