title: Setting Relative Path in React Router
body: <p>Is there a way to shorten the path length when routes are passed through components in React Router? For example, in <code>App.js</code>:</p>
  
  <pre><code>&lt;Switch&gt;
    &lt;Route exact path="/" component={Landing} /&gt;
    &lt;Route exact path="/login" component={Login} /&gt;
    &lt;PrivateRoute path="/main" component={Main} /&gt;
    &lt;Route component={NotFound} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>And in <code>Main.js</code> component:</p>
  
  <pre><code>&lt;Switch&gt;
      &lt;Route exact path="/main" component={Dashboard} /&gt;
      &lt;Route exact path="/main/users" component={Users} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>Can I somehow omit adding <code>/main</code> before <code>/main/users</code> everytime I am in the <code>Main</code> component? Can <code>/main</code> be set to <code>/</code> within that component or do I have to explicitly type the full path every time?</p>
  
  <p>I see discussions talking about something very similar (for example: <a href="https://stackoverflow.com/questions/36312453/does-react-router-support-relative-links">Does react-router support relative links?</a>) but is there anything for Router <strong>paths</strong> that can be configured? <code>&lt;Link to="users" /&gt;</code> is said to work but I can't get <code>&lt;Route path="users" /&gt;</code> to.</p>