reactjs react-router - im在添加路由之后获得404

ql3eal8s  于 2023-03-01  发布在  React
关注(0)|答案(2)|浏览(160)

在我的aspxwebform页面(test.aspx)中,我有一个选项卡,我想在单击时执行react组件(第二个组件)。
代码

测试.aspx

<Link to="/SysAdmin/HelpPageManagement" href="#">Help Pages</Link>

主文件.js

var React = require("react");
var ReactDom = require("react-dom");
var firstComponent = require("../Components/helpPage_Management_Component");
import {Router, Route, browserHistory } from 'react-router';

var secondComponent = React.createClass({
 render() {
     return ( <h1>Help Page </h1> );
  }
});

const router = (
  <Router history={browserHistory}>
    <Route path="/SysAdmin/HelpPageManagement" component={secondComponent}      />
 <Route path="/systemmaintenance.aspx" component={firstComponent} />

 </Router>
 )
 ReactDom.render(router, document.getElementById('helpPage'));
bsxbgnwa

bsxbgnwa1#

这是因为在React Router中定义路由是一个 * 客户端 * 路由,如果你直接请求url,你的服务器需要知道客户端将处理路由。
404由服务器生成,因为这通常是默认路由行为。
相反,配置你的服务器,使默认的是发送回主html页面与客户端路由,然后,React路由器将处理它在客户端的基础上的url。

juud5qan

juud5qan2#

我遇到了同样的问题,Davin特里翁对另一个答案的评论使我找到了this other SO question上的解决方案。
使用以下配置向我的站点添加web.config文件对我很有效,可以将所有路由发送回index.html文件:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Rewrite Text Requests" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

相关问题