title: React Router Render from Browser URL
body: <p>So I built a website using React but none of the routes can be accessed directly. The server that is hosting my react code is CPanel if that matters.</p>
  <p>I understand that for a route, such as <code>www.website.com/about</code>, the &quot;/about&quot; does not actually exist on the server. React dynamically updates the browser URL as the user is clicking on the app and &quot;navigates&quot; the webpages. If a user tries to access the about route directly, the server will not know what to do unless I do some extra work.</p>
  <p>But there must be a way to be able to type &quot;www.website.com/about&quot; (with a React based website) directly into the browser and access that page directly, right?</p>
  <p>I read <a href="https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually">this</a> and <a href="https://ui.dev/react-router-cannot-get-url-refresh/" rel="nofollow noreferrer">this</a>, both mentioning a catch all solution. I think I got half of that solution so far with my &quot;htaccess&quot; file (for instance, if you type <a href="http://www.website.com/about" rel="nofollow noreferrer">www.website.com/about</a> into the browser url, it will just redirect to the home page of my site).</p>
  <p>Now I want my code to be able to parse the browser URL and know to render the correct page/component, rather than just redirect to my home page. My confusion stems from the following (quoted from the second link):</p>
  <blockquote>
  <p>Catch-all</p>
  <p>If you already have a server you’re using, this is probably
  your best bet. The main idea here is that you redirect all of your
  server requests to /index.html. The outcome is similar to Hash
  History. <strong>Any request that is made to your server will respond with the
  index page (and then fetch any JS resources you need), React Router
  will then take over and load the appropriate view</strong>. The actual code for
  this varies on which type of server you have.</p>
  </blockquote>
  <p>(emphasis mine)</p>
  <p>So my <code>.htaccess</code> file does technically respond to the <code>index.html</code> page. Now I want React Router to &quot;take over and load the appropriate view&quot;. Is this an issue with my code or is this something related to my server?</p>
  <p>For reference, the following contains the contents of my <code>.htaccess</code> file. (apologies ahead of time, I don't know anything about how to write <code>htaccess</code> files, its all copied from random tutorials I found) :</p>
  <pre><code>RewriteEngine On 
  RewriteBase /
  RewriteCond %{SERVER_PORT} 80
  RewriteCond %{HTTP_HOST} ^(www\.)?wiseattend\.com
  RewriteRule ^(.*)$ https://www.wiseattend.com/$1 [R,L]
  RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
  RewriteRule ^ /%1 [NC,L,R]
  RewriteCond %{REQUEST_FILENAME}.html -f
  RewriteRule ^ %{REQUEST_URI}.html [NC,L]
  RewriteRule ^index\.html$ / [R=301,L]
  
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
  </code></pre>
  <p>And here is the <code>App.js</code> file from my react code:</p>
  <pre><code>import React, { useState, useLayoutEffect, useEffect } from 'react';
  import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
  import { history } from './history';
  
  
  // components
  // pages
  import Home from './pages/Home';
  import Privacy from './pages/Privacy';
  import Contact from './pages/Contact';
  
  
  const App = () =&gt; {
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        &lt;Router history={history}&gt;
          &lt;NavBar /&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; render={(props) =&gt; &lt;Home {...props} /&gt;} /&gt;
            &lt;Route path=&quot;/privacy&quot; render={(props) =&gt; &lt;Privacy {...props} /&gt;} /&gt;
            &lt;Route path=&quot;/contact&quot; render={(props) =&gt; &lt;Contact {...props} /&gt;} /&gt;
          &lt;/Switch&gt;
          &lt;Footer /&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>And here is my <code>index.js</code>:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>I feel like React Router should be smart enough to parse a URL and render the actual components that I need (with my <code>.htaccess</code> file serving the <code>index.html</code>), and that it is likely I am missing something in my code that will accomplish this. I feel that perhaps it has something to do with my history object but I am not sure.</p>
  <p>Any help would be greatly appreciated.</p>