title: How to set relative paths using React Router in an existing ASP.NET Core app that is using MVC
body: <p>First off, I would like to know if my course of action seems reasonable.</p>
  
  <p>I am trying to integrate React within a large ASP.NET Core project. This project is a traditional MVC application. I have been tasked with adding the functionality to incorporate React for a settings page.</p>
  
  <p>The page consists of 4 other settings pages. I was thinking this would be a good opportunity to incorporate client-side rendering in order to route to each settings pages.</p>
  
  <p>The setup is like this.</p>
  
  <ol>
  <li><p>Once the application starts, the path looks like this:
  <a href="https://localhost:3000/" rel="nofollow noreferrer">https://localhost:3000/</a></p></li>
  <li><p>Navigating to settings looks like this:
  <a href="https://localhost:3000/settings" rel="nofollow noreferrer">https://localhost:3000/settings</a></p></li>
  <li><p>I want to be able to go further and route like this:
  <a href="https://localhost:3000/settings/permissions" rel="nofollow noreferrer">https://localhost:3000/settings/permissions</a></p></li>
  </ol>
  
  <p>But I don't want to hard code the route "<a href="https://localhost:3000/settings/" rel="nofollow noreferrer">https://localhost:3000/settings/</a>". The problem is that the application is utilizing a traditional MVC, and the way that the user actually navigates to the settings page is totally separate from the page with react on it. All of the examples for React Router 4 seem to operate under the assumption that I have access to the props that have stored the previous location already.</p>
  
  <p>So basically, I want to know if there is a way that I can get the current location regardless of where the component is being rendered, so that I can use it as the relative path, where the relative path is the base route for the router (in this case the settings page)</p>
  
  <p>Here is my implementation</p>
  
  <pre><code>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((
     &lt;Router&gt;
        &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;Link to="/"&gt;Settings&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to="/permissions"&gt;Permissions&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;hr /&gt;
        &lt;Route exact path="/" component={Settings} /&gt;
        &lt;Route path="/permissions" component={Permissions} /&gt;
        &lt;/div&gt;
     &lt;/Router&gt;
   ), document.getElementById('reactcomponentwithapidata'));
  </code></pre>