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.
I understand that for a route, such as www.website.com/about, the "/about" does not actually exist on the server. React dynamically updates the browser URL as the user is clicking on the app and "navigates" 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.
But there must be a way to be able to type "www.website.com/about" (with a React based website) directly into the browser and access that page directly, right?
I read this and this, both mentioning a catch all solution. I think I got half of that solution so far with my "htaccess" file (for instance, if you type www.website.com/about into the browser url, it will just redirect to the home page of my site).
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):
Catch-all
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. 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. The actual code for this varies on which type of server you have.
(emphasis mine)
So my .htaccess file does technically respond to the index.html page. Now I want React Router to "take over and load the appropriate view". Is this an issue with my code or is this something related to my server?
For reference, the following contains the contents of my .htaccess file. (apologies ahead of time, I don't know anything about how to write htaccess files, its all copied from random tutorials I found) :
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]
And here is the App.js file from my react 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 = () => {
return (
<div className="app">
<Router history={history}>
<NavBar />
<Switch>
<Route exact path="/" render={(props) => <Home {...props} />} />
<Route path="/privacy" render={(props) => <Privacy {...props} />} />
<Route path="/contact" render={(props) => <Contact {...props} />} />
</Switch>
<Footer />
</Router>
</div>
);
}
export default App;
And here is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
I feel like React Router should be smart enough to parse a URL and render the actual components that I need (with my .htaccess file serving the index.html), 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.
Any help would be greatly appreciated.
