在ReactJS上的路由中添加前缀

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

我的所有路由都从

/

开始（例如：

localhost:3000/my_INDEX

）。现在，在Apache中，我的项目位于子文件夹中，因此路由是

domain.com/subfolder/my_INDEX

（因此，我的所有路由必须以：

/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>
            );

        }
    }
}

const history=useRouterHistory（createHistory）({
基本名称：'/upct'
})
导出默认类IndexRoutes.Component{
构造函数（）{
超级（）；
此.state={
数据加载：false，
伊萨明：错，
伊萨鲁诺：错，
isProf：错
}
}
render（）{
如果（！this.state.dataLoaded）{
返回(
卡甘多。。。
);
}否则{
返回(
{/*
*/}
);
}
}
}

---

上面的代码返回给我一个白色页面，即使路由没有退出。

您可以使用

baseName

属性创建历史记录对象，在您的情况下，该属性应具有值“subfolder”。然后，您的所有应用内路由将从此点开始扩展。例如：

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')
);

从'react router'导入{useRouterHistory}
从“历史”导入{createHistory}
const history=useRouterHistory（createHistory）({
basename:“/子文件夹”
})
const routes=//您的路由
渲染(
,
document.getElementById（'app'）
);

---

有关详细信息，请参阅或。

您可以使用

baseName

属性创建历史记录对象，在您的情况下，该属性的值应为“subfolder”。然后，您的所有应用内路由将从此点开始扩展。例如：

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')
);

从'react router'导入{useRouterHistory}
从“历史”导入{createHistory}
const history=useRouterHistory（createHistory）({
basename:“/子文件夹”
})
const routes=//您的路由
渲染(
,
document.getElementById（'app'）
);

---

有关详细信息，请参阅或。

如果我理解正确，您必须为指向子文件夹的网站配置vhost。我无法触摸vhost。只能添加.htaccess如果我理解正确，您必须为指向子文件夹的网站配置vhost。我无法触摸vhost。只能添加.htaccessI需要执行的操作：npm安装--保存历史记录，对吗？谢谢。是的，尽管历史记录是React Router的一个依赖项，但您应该将其作为您自己项目的一个显式依赖项来安装，以启用此功能。确定！非常感谢。我使用了你的代码，但我有一个问题。加载时，所有路由都以白色显示，没有内容，也没有错误。即使路由不存在，也会加载我在“编辑我的代码”中添加的白色页面，因为如果要查看itI需要执行的操作：npm安装--保存历史，对吗？谢谢。是的，尽管历史记录是React Router的一个依赖项，但您应该将其作为您自己项目的一个显式依赖项来安装，以启用此功能。确定！非常感谢。我使用了你的代码，但我有一个问题。加载时，所有路由都以白色显示，没有内容，也没有错误。即使路由不存在，也会加载我在“编辑我的代码”中添加的白色页面，原因是您是否希望看到它