title: How to structure nested React Router to avoid error: redirect to the same route you're on
body: <p>For the layout of my site, I want every content page to have the same padding, but I want the landing page component to have no such padding. To accomplish this I use a nested React Router; the outer Switch checks if it should display the landing page. If not, it renders a ContentPage, which places an outer padded div and then uses another React Router to load in the appropriate content. I have a Redirect case in the inner Switch so that if the user types in a nonexistent url, it will redirect them to the landing page. However, bad urls now give me this error:</p>
  
  <pre><code>You tried to redirect to the same route you're currently on: "/"
  </code></pre>
  
  <p>Here's my outer Router:</p>
  
  <pre><code>        &lt;Route exact path="/" component={LandingPage}/&gt;
  
          &lt;Route path="/" render={(props) =&gt; (
            &lt;ContentPage isLoggedIn={this.state.isLoggedIn} passwordHash={this.state.passwordHash} {...props} /&gt;
          )} /&gt;
        &lt;/Switch&gt;
  </code></pre>
  
  <p>And here's my inner router:</p>
  
  <pre><code>class ContentPage extends Component&lt;Props&gt; {
    render() {
      return (
        &lt;BrowserRouter&gt;
        &lt;div&gt;
          &lt;div className="content" style={{padding: "36px"}}&gt;
            &lt;Switch&gt;
              &lt;Route path="/logIn" component={LogIn}/&gt;
              &lt;Redirect to="/"/&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  
  <p>I get the error when I try to go to a bad url like "/asdfasdf". It doesn't make a whole lot of sense to me, since the redirect should be from the random URL to "/".</p>
  
  <p>If it's generally bad practice to have nested routers, I'm also open to any other method of having padding around all pages except for the landing page.</p>