title: How do I architect my router with different base structure in React.js?
body: <p>I am wondering if my current architecture of my component for routing is okay and wondering if there are any flaws for routing</p>
  
  <p>Since it is hard to describe it in words, I will show u my code down below.</p>
  
  <p>Router.js</p>
  
  <pre><code> &lt;BrowserRouter&gt;
     &lt;Route path = "/home" component = {Home} /&gt;
     &lt;Route path = "/forum" component = {Forum} /&gt;
   &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>Forum.js</p>
  
  <pre><code>class Forum extends Component{
      render(){
          return(
              &lt;div className = "forumDiv"&gt;
                  &lt;div className = "forumBodyDiv"&gt;
                      &lt;div className = "forumLogoDiv"&gt;
                          &lt;img
                              className = "lolLogoImg"
                              src= {LolLogo}
                              alt="cannot display" /&gt;
                      &lt;/div&gt;
                      &lt;ForumHeader /&gt;
                      {this.props.location.pathname === "/forum/login" ? 
                      &lt;Login /&gt; : 
                      this.props.location.pathname === "/forum/register" ? 
                      &lt;Register /&gt; :
                      &lt;ForumPage /&gt; }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>Home.js</p>
  
  <pre><code>class Home extends Component{
      render(){
          return(
              &lt;div className = "homeDiv"&gt;
                  &lt;TopNavigator /&gt;
                  &lt;div className = "homeBodyDiv"&gt;
                      &lt;LeftNavigator /&gt;
                      {this.props.location.pathname === "/home/index" ? 
                      &lt;Index /&gt; : 
                      this.props.location.pathname === "/home/page2" ? 
                      &lt;Page2 /&gt; :
                      &lt;HomePage /&gt; }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>As you can see, since Forum and Home has different base styles, I am checking the route by <code>this.props.location.pathname</code> and displaying the page according to my pathname. I am wondering if this is the best, most efficient way to do this. I am skeptical since I feel like all the routes should be inside the Router.js. Can someone let me know if there is a better way to do this? </p>
  
  <p>Thank you</p>