我正在使用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
我将此代码发布在IIS 8.5中,如果我访问了路由http // localhost:3000,它将返回所需的路由。
当我访问http // localhost:3000 / fluxocaixa时,我收到此错误:
此错误的解决方案吗?
要解决此问题,您首先需要安装URL重写模块。
下载链接:https://www.iis.net/downloads/microsoft/url-rewrite
在您的web.config文件中添加以下规则(如果没有,请先创建web.config文件)
<?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>
再次以产品模式构建应用程序并浏览。