手动输入 URL 时，React-Router-Dom 链接不起作用

Question

我在lastordersgame.com 创建了一个在线饮酒游戏。当您通过页面上的导航进入游戏时，它会将 /drinking_game 添加到 url 中，并且一切加载正常。但是，当您手动输入 lastordersgame.com/drinking_game 来玩游戏时，它不起作用并会出现 404 错误。

当我在本地主机上加载网站并在网址中输入它时，它可以正常工作，但在我使用 CPanel 托管的实际网站上则不然。我不确定这是我的反应代码的问题还是我需要在 CPanel 上修复的问题，但我在任何地方都找不到解决方案。

下面是我的 App.js 和 Index.Js 中的代码，我不确定是否需要向这些文件或任何其他组件添加任何内容才能使其正常工作，但其中没有任何内容。

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;

这也是我的饮酒游戏组件中的所有代码

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 DrinkingGame

我的猜测是它是带有反应路由器的客户端，因为它在本地主机上工作，但老实说我对此一无所知。

Answer 1

index.JS

从“react”导入React；从'react-dom'导入ReactDOM；导入'./index.css';从“./App”导入应用程序；从'./reportWebVitals'导入reportWebVitals；从 'react-router-dom' 导入 { BrowserRouter };

ReactDOM.render( , document.getElementById('root') );

reportWebVitals();

APP.JS

导入'./App.css';从'react-router-dom'导入{路由，路由}；从 './components/Homepage' 导入主页；从 './components/DrinkingGame' 导入 DrinkingGame；从 './components/Rules' 导入规则；

函数 App() { return ( ); }

导出默认应用程序；