Как установить относительные пути с помощью React Router в существующем приложении ASP.NET Core, которое использует MVC

Question

Прежде всего, я хотел бы знать, кажется ли мой ход действий разумным.

Я пытаюсь интегрировать React в большой проект ASP.NET Core.Этот проект является традиционным приложением MVC.Мне было поручено добавить функциональность для включения React для страницы настроек.

Страница состоит из 4 других страниц настроек.Я думал, что это будет хорошая возможность включить рендеринг на стороне клиента для маршрутизации к каждой странице настроек.

Настройка выглядит следующим образом.

1. Как толькоприложение запускается, путь выглядит так: https://localhost:3000/

2. Переход к настройкам выглядит следующим образом: https://localhost:3000/settings

3. Я хочу иметь возможность идти дальше и маршруткак это: https://localhost:3000/settings/permissions

Но я не хочу жестко кодировать маршрут "https://localhost:3000/settings/". Проблема в том, что приложение использует традиционный MVC, и способ, которымпользователь фактически переходит на страницу настроек, полностью отделенную от страницы с реакцией на нее.Все примеры для React Router 4, похоже, работают при условии, что у меня есть доступ к реквизитам, которые уже сохранили предыдущее местоположение.

В общем, я хочу знать, есть ли способ получить текущее местоположение независимо от того, где отображается компонент, чтобы я мог использовать его в качестве относительного пути, wздесь относительный путь является базовым маршрутом для маршрутизатора (в данном случае страница настроек)

Вот моя реализация

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link  } from 'react-router-dom';
import Settings from '../components/Settings';
import Permissions from '../components/Permissions';

ReactDOM.render((
   <Router>
      <div>
      <ul>
        <li>
          <Link to="/">Settings</Link>
        </li>
        <li>
          <Link to="/permissions">Permissions</Link>
        </li>
      </ul>
      <hr />
      <Route exact path="/" component={Settings} />
      <Route path="/permissions" component={Permissions} />
      </div>
   </Router>
 ), document.getElementById('reactcomponentwithapidata'));

Answer 1

Попробуйте добавить basename к вашему Router компоненту со значением /settings.

<Router basename="/settings">
    { /* ... */ }
</Router>

Из документации :

Базовый URL для всех местоположений. Если ваше приложение обслуживается из подкаталога на вашем сервере, вы можете установить его в подкаталог. Правильно отформатированное базовое имя должно иметь начальную косую черту, но не должно заканчиваться косой чертой.