Question

我使用ReactJS create-react-app制作了一个简单的应用程序，并使用了react-router-dom。当路由位于本地服务器上时，路由工作正常，但是当我构建应用程序并将其上传到共享主机时，路由不起作用，并且得到404。我不知道是什么问题。

我遵循了许多类似于我的StackOverflow的问题，但是没有一个问题对我有帮助，即使我尝试使用HashRouting代替BrowserRouting，但仍然是相同的问题。

ROOT组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Register from './Components/Auth/register.jsx';
import Login from './Components/Auth/login.jsx';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router,  Route} from 'react-router-dom';

ReactDOM.render(
    <Router>
        <Route path="/app" exact component={App} />
        <Route path="/app/all" component={App} />
        <Route path="/app/history" component={App} />
        <Route path="/register"  component={Register}/>
        <Route path="/login"  component={Login}/>
    </Router>
    , document.getElementById('root'));

serviceWorker.unregister();

具有子子级的子组件

import React, { Component } from 'react'
import '../SCSS/components.scss';
import ClockTable from '../Clock/Clock Components/clock-table'
import {Redirect, BrowserRouter as Router, Route} from 'react-router-dom'
import History from './Clock Components/history'
import All from './Clock Components/all'
import { Cookies } from '../Globals.js'

export class Clock extends Component {

    constructor(props) {
        super(props)
        this.state = {
            authenticated : null
        }
    }

    componentDidMount(){
        // new Cookies().deleteAllCookies()
        if(new Cookies().getCookie('uid')){
            this.setState({
                authenticated : true,
            })
        } else{
            this.setState({
				authenticated : false
			})
        }
    }
    
    
    render() {
        if(this.state.authenticated === false){
            return <Redirect to='/login' />
        }
        return (
            <>
                <div className="container clock-sec">
                    <div className="row">
                        <div className="col-12">
                            <div className="big-head">
                                CLOCK
                            </div>
                        </div>
                        <div className="col-3">
                            <div className="clock-left-table clock-sub-sec">
                                <ClockTable />
                            </div>
                        </div>
                        <div className="col-9">
                            <Router>
                                <Route path="/app/all" exact component={All}/>
                                <Route path="/app/history" component={History}/>
                            </Router> 
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default Clock

Answer 1

正如@Sung M. Kim在其评论中提到的那样，您需要将服务器设置为始终为所有请求（除非有api调用）提供index.html文件。

每个服务器的设置方法都不同。

构建应用程序时，React Routing不起作用-React JS，React Router DOM

1 个答案: