如何在现有 ASP.NET 使用 MVC 的核心应用程序中使用 React Router 设置相对路径

Question

首先，我想知道我的做法是否合理。

我正在尝试将 React 集成到一个大型 ASP.NET 核心项目中。这个项目是一个传统的 MVC 应用程序。我的任务是添加将 React 合并到设置页面的功能。

该页面由 4 个其他设置页面组成。我在想这将是一个很好的机会来合并客户端呈现以便路由到每个设置页面。

设置是这样的

应用程序启动后，路径如下所示： https://localhost:3000/
导航到设置如下所示： https://localhost:3000/settings
我希望能够走得更远，走这样的路线： https://localhost:3000/settings/permissions

但我不想硬编码路由“https://localhost:3000/settings/”。问题在于该应用程序正在使用传统的 MVC，并且用户实际导航到设置页面的方式与对其做出反应的页面完全分开。 React Router 4 的所有示例似乎都在假设我可以访问已经存储了先前位置的道具的情况下运行。

所以基本上，我想知道是否有一种方法可以获取当前位置，而不管组件在何处呈现，以便我可以将其用作相对路径，其中相对路径是路由器的基本路由（在本例中为设置页面）

这是我的实现

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 添加到值为 /settings 的 Router 组件。

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

来自documentation：

The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

如何在现有 ASP.NET 使用 MVC 的核心应用程序中使用 React Router 设置相对路径

How to set relative paths using React Router in an existing ASP.NET Core app that is using MVC

asp.net

reactjs

react-router

asp.net-core

react-router-v4