React Router 4 - Проблемы рендеринга вложенных ссылок

Question

Я новичок в сцене React, и после примерно недели серфинговых решений и обучающих программ я не смог решить эту проблему.

У меня следующая структура с ожидаемыми результатами :

• Компонент «Main» (в настоящее время index.js) имеет ссылку Nav.
• Указанная ссылка указывает на компонент под названием «Пользователи», который отображает список пользователей.
• Нажатие на ссылку пользователя должно заменить список пользователей «подробным представлением» этого пользователя (в настоящее время говорится«Route Test»), аналогично тому, что, находясь на Facebook и выбирая «profile», вы переходите на другую страницу.

Я ознакомился с этим уроком: https://reacttraining.com/react-router/web/example/basicза исключением использования параметров "match" на данный момент, b / c, кажется, что я не использую их правильно на codesandbox, на котором я тоже новичок.

Фактические результаты

При нажатии на первую ссылку «Список пользователей» отображается точный список, но также отображается компонент «UserDashboard» под списком.

Нажатие на одну из ссылок пользователя обновляет URL-адрес, но выводит вас на пустую страницу.

Код как для index.js :

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import Users from "./Users";
import UserDashboard from "./UserDashboard";

import "./styles.css";

function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link to="/users/">Users List</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/users/" component={Users} />          
        </Switch>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Users.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import UserDashboard from "./UserDashboard";

function Users({ match }) {
  return (
    <div>
      <ul>
        <li>
          <Link to="/1">John Smith</Link>   
        </li>
        <li>
          <Link to="/2">Alex Rogers</Link>
        </li>
        <li>
          <Link to="/3">Ignacio Don</Link>
        </li>
      </ul>
      <Route path="/:id" component={UserDashboard} />
    </div>
  );
}

export default Users;

UserDashboard.js

import React from "react";
import ReactDOM from "react-dom";

function UserDashboard({ match }) {
  return (
    <div>
      <h3>Route Test</h3>
      <h3>{match.params.topicId}</h3>
    </div>
  );
}

export default UserDashboard;

Идея, конечно же, заключается в том, чтобы произвестивсе это с фактическими данными с использованием graphQL, но пока я не исправлю эту (вероятно, очевидную) проблему, я не могу продолжить.

Ссылка на демонстрационную версию кода выше:

https://codesandbox.io/embed/oxx1v2ylyq

Answer 1

В index.js я изменил пару строк,

<Link to="/users">Users List</Link>

и

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

Извлечение точного в вашем маршруте и удаление слешей в конце пользователей.

В Users.js я изменил ваши Ссылки и Маршруты, чтобы быть похожим на пример по обучению реагированию

<Link to={`${match.url}/1`}>John Smith</Link>
<Route path={`${match.path}/:id`} component={UserDashboard} />

А в UserDashboard.js я изменил

<h3>{match.params.topicId}</h3>

<h3>{match.params.id}</h3>

Я думаю, что происходило то, что маршрутизатор соответствовал / users в вашем операторе switch из-за свойства точного .Я надеюсь, что это именно то поведение, которое вы искали.

Редактировать

Чтобы заставить компоненты отключаться при нажатии пользователем, переместите

<Route path='/users/:id' component={UserDashboard} />

От Users.js до index.js внутри компонента Switch и ниже

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

Уведомление точный возвращается в маршрут / users.Это обеспечит совпадение маршрута / users.