React-router v5 обновляет URL, но не отображает вложенный компонент

Question

Я создал приложение, используя react, react-router, react-redux, connected-react-router, и у меня следующая структура:

- app
  - admin
    - category
      - categoryList
      - categoryAdd

Моя идея - выполнить следующий поток приложения:

/admin -> /admin/category -> /admin/category/add

, но по какой-то причине я не вижу последний обработанный компонент (CategoryAdd).

Код (ссылка песочницы в конце):

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Route, Switch, Link } from "react-router-dom"; 
import { ConnectedRouter } from "connected-react-router";
import configureStore, { history } from "./configureStore";

import AdminPage from "./AdminPage";
import Category from "./Category";

const store = configureStore(/* provide initial state if any */);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <>
        <Link to="/admin/category">Category</Link>
        <Switch>
          <Route exact path="/admin" component={AdminPage} />
          <Route exact path="/admin/category" component={Category} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

AdminPage.js

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

export default function AdminPage() {
  return (
    <div style={{ border: "1px solid black", margin: 20 }}>
      <div>AdminPage</div>
      <Link to="/admin/category">Catgory page link</Link>
    </div>
  );
}

Category.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router-dom";
import CategoryList from "./CategoryList";
import CategoryAdd from "./CategoryAdd";

function Category() {
  return (
    <Switch>
      <Route path={`/admin/category`} render={() => <CategoryList />} />
      <Route path={`/admin/category/add`} render={() => <CategoryAdd />} />
    </Switch>
  );
}

export default withRouter(Category);

CategoryList.js

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

export default function CategoryList() {
  return (
    <div style={{ border: "1px solid black", margin: 20 }}>
      CategoryTable <Link to="/admin/category/add">Add</Link>
    </div>
  );
}

CategoryAdd.js

export default function Add() {
  return <div style={{ border: "1px solid black", margin: 20 }}>Add Page</div>;
}

Вот песочница: https://codesandbox.io/embed/dark-star-3fhs0

Answer 1

Это из-за ключевого слова exact на вашем маршруте /admin/category:

<Route exact path="/admin/category" component={Category} />

Это соответствует только /admin/category, но не /admin/category/add.

Удаление exact, к сожалению, решит только вашу первую проблему.

Другое ваше использование Switch. Вам следует удалить Switch в вашем Index.js, потому что, как только вы сопоставите свой маршрут /admin/category, он не будет совпадать ни с одним из маршрутов в вашем компоненте категории.

Answer 2

Вы используете Switch, которые соответствуют только одному маршруту, поэтому ваши вторые маршруты в компонентах index.js и Category никогда не будут отображаться.

1) Удалить Switch компонент и exact маршрутные реквизиты в index.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <>
        <Link to="/admin/category">Category</Link>
        <Route path="/admin" component={AdminPage} />
        <Route path="/admin/category" component={Category} />
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

2) Удалить Switch in Category

function Category() {
  return (
    <>
      <Route path={`/admin/category`} render={() => <CategoryList />} />
      <Route path={`/admin/category/add`} render={() => <CategoryAdd />} />
    </>
  );
}

Это работает в вашей изолированной программной среде кода, но ваш компонент CategoryAdd поврежден, потому что вы не импортируете React. Поэтому добавьте его в первой строке:

import React from 'react';

Результат: