Блог

Я изучал React в свободное время и при этом создаю портал управления проектами. У меня есть настройка маршрута панели мониторинга в «/» и настройка маршрута проектов в «/ projects». Я хочу создать динамический маршрут для отдельных проектов, поэтому определил этот маршрут как «/projects/:id».

Маршрут работает при переходе через навигацию следующим образом Главная страница&&t; Проекты&&t; [Отдельный проект]. Это успешно загружает единственный компонент проекта.

Проблема в том, что когда я работаю над одним проектом (пример URL «/projects/ test-project»), основная навигация прерывается, и каждая ссылка на боковой панели теперь начинается с «/ projects». Итак, когда в одном проекте и при нажатии на основную навигацию ссылки переходят на:

• /проекты/панельмониторинга
• /проекты/projects
• /проекты/задачи
• /проекты/контакты

Это почти как когда на одной странице базовый URL выводится на уровень выше; поэтому, когда в одном проекте все ссылки на боковой панели основаны на относительном пути «проекты».

Как вы, вероятно, можете сказать, мне трудно объяснить эту проблему. Я просмотрел различные руководства по этому вопросу, и, похоже, я все делаю правильно. Большинство руководств предназначены для React 4, поэтому используются компоненты класса — я прошел через множество предположений, поэтому я рад предоставить все, что я могу предоставить для дальнейшего объяснения проблемы или устранения неполадок.

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

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

Вот пример моей настройки, который показывает проблему, с которой я столкнулся: https://codesandbox.io/s/funny-mendeleev-ru5vt

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

Я думаю, что вы ищете вложенные маршруты, поскольку вы используете перехваты react, пожалуйста, измените настройки вашего маршрута, как показано ниже

 import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch
} from "react-router-dom";
function Topic() {
  let { topicId } = useParams();
  return (
    <div&&t;
      <h3&&t;{topicId}</h3&&t;
    </div&&t;
  );
}
function Topics() {
  let { path, url } = useRouteMatch();
  return (
    <div&&t;
      <h2&&t;Topics</h2&&t;
      <ul&&t;
        <li&&t;
          <Link to={`${url}/foo`}&&t;Foo</Link&&t;
        </li&&t;
        <li&&t;
          <Link to={`${url}/bar`}&&t;Bar</Link&&t;
        </li&&t;
        <li&&t;
          <Link to={`${url}/baz`}&&t;Baz</Link&&t;
        </li&&t;
      </ul&&t;
      <Switch&&t;
        <Route exact path={path}&&t;
          <h3&&t;Please select a topic.</h3&&t;
        </Route&&t;
        <Route path={`${path}/:topicId`}&&t;
          <Topic /&&t;
        </Route&&t;
      </Switch&&t;
    </div&&t;
  );
}
function App() {
  return (
    <Router&&t;
      <div&&t;
        <ul&&t;
          <li&&t;
            <Link to="/"&&t;Home</Link&&t;
          </li&&t;
          <li&&t;
            <Link to="/topics"&&t;Topics</Link&&t;
          </li&&t;
        </ul&&t;
        <hr /&&t;
        <Switch&&t;
          <Route exact path="/"&&t;
            <p&&t;Home</p&&t;
          </Route&&t;
          <Route path="/topics"&&t;
            <Topics /&&t;
          </Route&&t;
        </Switch&&t;
      </div&&t;
    </Router&&t;
  );
}
const rootElement = document.&etElementById("root");
ReactDOM.render(<App /&&t;, rootElement);
  

Обновить:

рабочая демонстрация здесь

Я нашел ответ. Это было что-то критически простое — я не использовал косые черты в начале своих навигационных ссылок. Маршрутизатор работал так, как должен, но просто нужно было добавить косые черты.

Иногда это действительно самая простая вещь. Спасибо всем, кто помог!