Question

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

我正在尝试将React集成到一个大型ASP.NET Core项目中。该项目是传统的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

尝试将dict添加到值为basename的{{1}}组件中。

Router

来自documentation：

所有位置的基本URL。如果您的应用是从服务器上的子目录提供的，则需要将其设置为子目录。格式正确的基本名称应以斜杠开头，但不能以斜杠结尾。

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

1 个答案: