Reactjs 访问IIS中的另一个路由返回错误 脚本:

Reactjs 访问IIS中的另一个路由返回错误 脚本:,reactjs,iis-8,react-router-dom,Reactjs,Iis 8,React Router Dom,我正在使用React来完成我的项目。 我还使用react-router-dom路由应用程序。对于此路线,我有以下代码: import React from 'react' import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom' import isAuthenticated from '~/services/auth/auth' import history from './history' import

我正在使用React来完成我的项目。 我还使用
react-router-dom
路由应用程序。对于此路线,我有以下代码:

import React from 'react'
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import isAuthenticated from '~/services/auth/auth'
import history from './history'

import Login from '~/pages/login'
import Menu from '~/pages/menumain'

/* *** SISTEMA *** */
/* Permissões */
import Permissions from '~/pages/sistema/permissoes/permissoes'
import AddPermission from '~/pages/sistema/permissoes/addpermission'

/* *** CADASTRO *** */
/* Usuário */
import ReadUsers from '~/pages/cadastro/usuario/listusers'
import CreateUser from '~/pages/cadastro/usuario/cadusers'
import UpdateUser from '~/pages/cadastro/usuario/edituser'
/* Empresa */
import ReadCompany from '~/pages/cadastro/empresa/listEmpresa'
import CreateCompany from '~/pages/cadastro/empresa/cadEmpresa'
import UpdateCompany from '~/pages/cadastro/empresa/editEmpresa'
/* Contas */
import ReadAccount from '~/pages/cadastro/contas/index'
import CreateAccounts from '~/pages/cadastro/contas/create'
import UpdateAccounts from '~/pages/cadastro/contas/update'
/* Fechamento */
import ReadClosure from '~/pages/cadastro/fechamento/index'
/* *** FLUXO DE CAIXA *** */
import FluxoCaixa from '~/pages/fluxoCaixa/index'

/* *** Ajuda ** */
import Sobre from '~/pages/ajuda/sobre'

/* *** Erro *** */
import Error from '~/pages/error'

import PermissonStatus from '~/pages/getpermissions'

const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
    {...rest}
    render={props => {
    const isAuth = isAuthenticated()
    return isAuth ? (
        <Component {...props} />
    ) : (
        <Redirect
        to={{ pathname: '/login', state: { from: props.location } }}
        />
    )
    }}
/>
)

const Routes = () => (
<BrowserRouter history={history}>
    <Switch>
    <Route exact path="/login" component={Login} />
    <Route exact path="/fluxocaixa" component={FluxoCaixa} />
    <PrivateRoute exact path="/" component={Menu} />

    {/* *** SISTEMA *** */}
    {/* Permissões */}
    <PrivateRoute exact path="/permissions" component={Permissions} />
    <PrivateRoute exact path="/permissionModels" component={AddPermission} />
    {/* Usuário */}
    <PrivateRoute exact path="/readusers" component={ReadUsers} />
    <PrivateRoute exact path="/createuser" component={CreateUser} />
    <PrivateRoute exact path="/updateuser" component={UpdateUser} />
    {/* Empresa */}
    <PrivateRoute exact path="/readcompany" component={ReadCompany} />
    <PrivateRoute exact path="/createcompany" component={CreateCompany} />
    <PrivateRoute exact path="/updatecompany" component={UpdateCompany} />
    {/* Contas */}
    <PrivateRoute exact path="/readaccounts" component={ReadAccount} />
    <PrivateRoute exact path="/createaccounts" component={CreateAccounts} />
    <PrivateRoute exact path="/updateaccounts" component={UpdateAccounts} />
    {/* Fechamento */}
    <PrivateRoute exact path="/readclosure" component={ReadClosure} />

    {/* *** Ajuda *** */}
    {/* Sobre */}
    <PrivateRoute exact path="/about" component={Sobre} />

    <PrivateRoute exact path="/permstatus" component={PermissonStatus} />

    <Route component={Error} />
    <Route exact path="/teste" component={Permissions} />
    </Switch>
</BrowserRouter>
)
export default Routes
从“React”导入React
从“react router dom”导入{BrowserRouter,Route,Switch,Redirect}
导入已从“~/services/auth/auth”验证
从“/历史记录”导入历史记录
从“~/pages/Login”导入登录名
从“~/pages/menumain”导入菜单
/****系统****/
/*许可证*/
从“~/pages/sistema/permissoes/permissoes”导入权限
从“~/pages/sistema/permissoes/AddPermission”导入AddPermission
/****地籍登记****/
/*乌苏瓦里奥*/
从“~/pages/cadastro/usuario/listusers”导入ReadUsers
从“~/pages/cadastro/usuario/cadusers”导入CreateUser
从“~/pages/cadastro/usuario/edituser”导入UpdateUser
/*埃普雷萨酒店*/
从“~/pages/cadastro/empresa/listEmpresa”导入ReadCompany
从“~/pages/cadastro/empresa/cadEmpresa”导入CreateCompany
从“~/pages/cadastro/empresa/editEmpresa”导入更新公司
/*康塔斯*/
从“~/pages/cadastro/contas/index”导入ReadAccount
从“~/pages/cadastro/contas/create”导入CreateCounts
从“~/pages/cadastro/contas/update”导入UpdateAccounts
/*费查门托*/
从“~/pages/cadastro/fechamento/index”导入ReadClosure
/****CAIXA FLUXO DE CAIXA****/
从“~/pages/FluxoCaixa/index”导入FluxoCaixa
/****阿尤达***/
从“~/pages/ajuda/Sobre”导入Sobre
/****错误****/
从“~/pages/Error”导入错误
从“~/pages/getpermissions”导入PermissStatus
const privaterout=({component:component,…rest})=>(
{
const isAuth=isAuthenticated()
返回isAuth(
) : (
)
}}
/>
)
常数路由=()=>(
{/**SISTEMA***/}
{/*许可证*/}
{/*Usuário*/}
{/*Empresa*/}
{/*Contas*/}
{/*Fechamento*/}
{/**Ajuda***/}
{/*Sobre*/}
)
导出默认路由
目标: 我在IIS8.5中发布了这段代码,如果我访问了路由http//localhost:3000,它将返回所需的路由

问题: 当我访问http//localhost:3000/fluxocaixa时,我收到了以下错误:


有没有解决此错误的方法?

要解决此问题,您首先需要安装URL重写模块

下载链接:

在web.config文件中添加以下规则(如果没有,则首先创建web.config文件)


再次以prod模式构建应用程序并浏览

第101课。
<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React Routes" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>