Question

我正在尝试在Apache Server上部署我的ReactJS应用程序。但我有一个问题：

我的所有路线都从/开始（例如：localhost:3000/MY_INDEX）。现在，在Apache中，我的项目位于子文件夹中，因此路由为domain.com/subfolder/MY_INDEX（因此，我的所有路由都必须以：/subfolder/开头）。无论如何，路由的根（/）在domain/subfolder之后开始，而不必使用此前缀更改所有内容？

谢谢。

编辑：----这是我的代码：

const history = useRouterHistory(createHistory)({
    basename: '/upct'
})

export default class IndexRoutes extends React.Component { 
    constructor() {
        super();

        this.state = {
            dataLoaded: false,
            isAdmin: false,
            isAlumno: false,
            isProf: false
        }
    }

    render() {
        if (!this.state.dataLoaded) {

            return (
                <div class="text-center">Cargando...</div>
            );

        } else {

            return (
                <Router history={history}>

                    <Route path="/" component={NoEncontrado404}/>
                    <Redirect from="/alumno" to="/alumno/inicio"/>
                    <Redirect from="/administrador" to="/administrador/inicio"/>

                    <Route path="/" component={App}>

                        <Route path="administrador" component={AppAdministrador}>
                            <Route path="inicio" component={RequireAdministrador(Administrador_Inicio, this.state.isAdmin)}/>
                            <Route path="nueva_incidencia" component={RequireAdministrador(Administrador_NuevaIncidencia, this.state.isAdmin)}/>
                            <Route path="incidencias_recibidas" component={RequireAdministrador(Administrador_IncidenciasRecibidas, this.state.isAdmin)}/>
                            <Route path="incidencias_recibidas/nuevo_informe" component={RequireAdministrador(Administrador_NuevoInforme, this.state.isAdmin)}/>
                            <Route path="informes" component={RequireAdministrador(Administrador_Informes, this.state.isAdmin)}/>
                            <Route path="informes/nueva_respuesta_informe/:id" component={RequireAdministrador(Administrador_NuevaRespuestaInforme, this.state.isAdmin)}/>
                        </Route>

                        <Route path="alumno" component={AppAlumno}>
                            <Route path="inicio" component={RequireAlumno(Alumno_Inicio, this.state.isAlumno)}/>
                            <Route path="nueva_incidencia" component={RequireAlumno(Alumno_NuevaIncidencia, this.state.isAlumno)}/>
                            <Route path="mis_incidencias" component={RequireAlumno(Alumno_MisIncidencias, this.state.isAlumno)}/>
                        </Route>


                        <Route path="/profesor/informes/nueva_respuesta_informe/:id" component={RequireProfesor(Profesor_NuevaRespuestaInforme, this.state.isProf)}/>

                    </Route>

                    <Route path="/:loggedAs/acceso_restringido" component={AccesoRestringido}/>
                    <Route path='/404' component={NoEncontrado404} />

                    <Redirect from='*' to='/404' />

                {/*
                    <Route path="*" component={NoEncontrado404}/>
                */}

                </Router>
            );

        }
    }
}

上面的代码正在返回一个白页，即使路线没有退出。

Answer 1

您可以使用baseName属性创建历史记录对象，在您的情况下，该属性应具有值“子文件夹”。然后，您的所有应用内路由将从此点延伸。例如：

import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/subfolder'
})

const routes = // your routes

render(
  <Router history={history} routes={routes} />,
  document.getElementById('app')
);

有关详细信息，请参阅history docs或React Router docs。

在ReactJS上的路由中添加前缀

1 个答案: