Question posted in 
I have created an online drinking game at lastordersgame.com. When you go through the navigation on the page to get to the game, it adds /drinking_game to the url and it all loads fine. However, when you manually type in lastordersgame.com/drinking_game to play the game it doesnt work and brings up a 404 error.
When i load the website on local host and type it in the url it works perfectly, but it doesn’t on my actual website which I use CPanel to host. I’m not sure if this is a problem with my react code or something I need to fix on CPanel but I can’t find a solution anywhere.
Below is the code in my App.js and Index.Js, im not sure if I need to add anything to these files or any of my other componenets to get it to work but there isnt anything in those.
IndexJS.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
);
App.js
import './App.css';
import { Route, Routes } from 'react-router-dom';
import Homepage from './components/Homepage';
import DrinkingGame from './components/DrinkingGame';
import Rules from './components/Rules';
function App() {
return (
<div className ="App">
<Routes>
<Route path='/' element={<Homepage/>} />
<Route path='/brandons_drinking_game' element={<Homepage/>} />
<Route path='/homepage' element={<Homepage />} />
<Route path='/drinking_game' element={<DrinkingGame />} />
<Route path='/rules' element={<Rules />} />
</Routes>
</div>
);
}
export default App;
Here is all of the code inside of my Drinking Game component too
import React from 'react'
import '../styles/DrinkingGame.css'
import { Link } from 'react-router-dom';
import { useState, } from 'react';
import BlackGameCards from './BlackGameCards';
import OrangeGameCards from './OrangeGameCards';
import BlueGameCards from './BlueGameCards';
import GreenGameCards from './GreenGameCards';
import RedGameCards from './RedGameCards';
import PinkGameCards from './PinkGameCards';
import YellowGameCards from './YellowGameCards';
import shearer_image from './images/shearer.png'
import speech_bubble from './images/speech_bubble.png'
import WhiteGameCards from './WhiteGameCards';
import PurpleGameCards from './PurpleGameCards';
import rotate_device from './images/rotate_device.png'
import earthquake_image from './images/earthquake_image.png'
import boozenami_image from './images/boozenami.png'
import waves_image from './images/waves_image.png'
import genie_image from './images/genie_image.png'
import reflect_shield from './images/reflect_shield.png'
const DrinkingGame = () => {
const [num, setNum] = useState(5);
const [prevNum, setPrevNum] = useState(5);
const [shearerNum, setShearerNum] = useState(0);
const storedNames = JSON.parse(localStorage.getItem("player names"))
let randomName = storedNames[Math.floor(Math.random() * storedNames.length)];
const [assignedName, setAssignedName] = useState(0);
const [shearerStyle, setShearerStyle] = useState("shearer_popup_gone")
const [speechBubbleStyle, setSpeechBubbleStyle] = useState("speech_bubble_gone")
const [shearerTextStyle, setShearerTextStyle] = useState("shearer_text_gone")
const [shearerNameStyle, setShearerNameStyle] = useState("shearer_text_name_gone")
const [cardStyle, setCardStyle] = useState("game_container")
const [earthquakeDetailsStyle, setEarthquakeDetailsStyle] = useState("earthquake_container_gone")
const [earthquakeNum, setEarthquakeNum] = useState(0);
const [boozenamiDetailsStyle, setBoozenamiDetailsStyle] = useState("earthquake_container_gone")
const [boozenamiNum, setBoozenamiNum] = useState(0);
const [genieNum, setGenieNum] = useState(0);
const [genieDetailsStyle, setGenieDetailsStyle] = useState("earthquake_container_gone")
const [shieldNum, setShieldNum] = useState(0);
const [shieldDetailsStyle, setShieldDetailsStyle] = useState("earthquake_container_gone")
*all of my functions for the game itself*
/////////////////////////////////////////////////////////////////////////// HTML
return (
*all of my html code*
)
}
export default DrinkingGameMy guess is its a client sided thing with react router since it works on local host, but i’m honestly just clueless with it.
2
Answers
ndex.JS
import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./index.css’; import App from ‘./App’; import reportWebVitals from ‘./reportWebVitals’; import { BrowserRouter } from ‘react-router-dom’;
ReactDOM.render( <React.StrictMode> </React.StrictMode>, document.getElementById(‘root’) );
reportWebVitals();
APP.JS
import ‘./App.css’; import { Route, Routes } from ‘react-router-dom’; import Homepage from ‘./components/Homepage’; import DrinkingGame from ‘./components/DrinkingGame’; import Rules from ‘./components/Rules’;
function App() { return ( ); }
export default App;
It seems like the issue might be related to how your server is configured to handle routing, especially when it comes to client-side routing with React Router.
When you manually type lastordersgame.com/drinking_game in the browser’s address bar, the request is sent to the server. If your server is not configured to handle such requests and doesn’t know how to route them properly, it might return a 404 error because it cannot find a corresponding file or route on the server.
To fix this issue, you need to ensure that your server is configured to properly handle client-side routing. With React Router, this typically involves setting up your server to serve the same index.html file for any URL so that React Router can take over and handle the routing on the client-side.
Here’s how you can configure some common servers:
Apache: If you’re using Apache, you can create or modify the .htaccess file in your public directory to redirect all requests to index.html. Here’s an example:
Nginx: If you’re using Nginx, you can add the following configuration to your server block:
CPanel: If you’re using CPanel, you might need to check your hosting provider’s documentation or contact support to see how to configure URL rewriting or redirection to ensure all requests are directed to index.html.
Once you’ve configured your server to properly handle client-side routing, typing lastordersgame.com/drinking_game in the browser’s address bar should load your React app and navigate to the correct route.