Code
2023-04-07 05:01:31

React-router url在刷新或手动写入时不起作用

我正在使用React-router，当我点击链接按钮时，它工作得很好，但当我刷新我的网页时，它没有加载我想要的东西。

例如，我在localhost/joblist和一切都很好，因为我到达这里按下一个链接。但如果我刷新网页，我会得到:

Cannot GET /joblist

默认情况下，它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist，他们工作得很好。但我不喜欢这种类型的URL，所以试图删除#，我写道:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

这个问题不会发生在localhost/，这个总是返回我想要的。

这个应用程序是单页的，所以/joblist不需要向任何服务器询问任何事情。

我的整个路由器。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

当前回答

为乔舒亚·戴克的答案添加更多信息。

如果你正在使用Firebase，并且想同时使用根路由和子目录路由，你需要在你的Firebase .json中添加以下代码:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/subdirectory/**",
        "destination": "/subdirectory/index.html"
      }
    ]
  }
}

例子:

你正在为客户建立一个网站。您希望网站的所有者在https://your.domain.com/management中添加信息，而网站的用户将导航到https://your.domain.com。

在这种情况下，您的火源。Json文件是这样的:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/management/**",
        "destination": "/management/index.html"
      }
    ]
  }
}
2019-03-12 07:01:14

其他回答

这里有一个简单、清晰和更好的解决方案。如果你使用网络服务器，它就可以工作。

每个web服务器都有能力在出现HTTP 404时将用户重定向到错误页面。要解决此问题，需要将用户重定向到索引页。

如果您使用Java基础服务器(Tomcat或任何Java应用程序服务器)，解决方案可能如下:

web . xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

例子:

得到http://example.com/about web服务器抛出HTTP 404，因为此页面在服务器端不存在 错误页面配置通知服务器将index.jsp页面发送回用户 那么JavaScript将在客户端完成剩下的工作，因为客户端的URL仍然是http://example.com/about。

就是这样。不再需要魔法:)

2017-01-15 14:01:24

这可以解决你的问题。

在生产模式下的React应用程序中，我也遇到了同样的问题。这里有两个解决这个问题的方法。

解决方案1。将路由历史更改为“hashHistory”，而不是browserHistory

<Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
</Router>

现在使用命令构建应用程序

sudo npm run build

然后将构建文件夹放在var/www/文件夹中。现在，在每个URL中添加#标签，应用程序就可以正常工作了。就像

localhost/#/home
localhost/#/aboutus

解决方案2:没有#标签使用browserHistory，

在路由器中设置你的history = {browserHistory}。现在使用sudo npm run build构建它。

您需要创建“conf”文件来解决404 not found页面。conf文件应该是这样的。

打开终端，输入以下命令

cd /etc/apache2/sites-available
ls
nano sample.conf

在其中添加以下内容

<VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

现在您需要使用以下命令启用sample.conf文件:

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

然后，它将要求您重新加载Apache服务器，使用

sudo service apache2 reload or restart

然后打开您的localhost/build文件夹，并添加包含以下内容的.htaccess文件。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]

现在应用程序运行正常。

注意:0.0.0.0 IP地址修改为本地IP地址。

2017-02-07 15:55:00

在index.html文件头部，添加以下内容:

<base href="/">
<!-- This must come before the CSS and JavaScript code -->

然后，当与Webpack开发服务器一起运行时，使用此命令。

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

-history-api-fallback是重要的部分

2018-04-01 14:26:39

如果你通过AWS Static S3 hosting和CloudFront托管React应用程序

这个问题由CloudFront以403 Access Denied消息响应，因为它期望/some/other/路径存在于我的S3文件夹中，但该路径只存在于React路由器的内部路由中。

解决方案是设置一个分发错误页面规则。转到CloudFront设置并选择您的发行版。接下来，进入“错误页面”选项卡。单击“创建自定义错误响应”，并添加403条目，因为这是我们获得的错误状态代码。

将响应页路径设置为/index.html，状态代码设置为200。

最终的结果让我惊讶于它的简单。索引页被提供，但URL保存在浏览器中，因此一旦React应用程序加载，它就会检测URL路径并导航到所需的路由。

错误页403规则

2017-11-23 03:10:45

路由器可以用两种不同的方式调用，这取决于导航是发生在客户端还是服务器上。您已经将其配置为客户端操作。关键参数是run方法的第二个参数，即location。

当你使用React Router Link组件时，它会阻塞浏览器导航并调用transitionTo来做客户端导航。您正在使用HistoryLocation，因此它使用HTML5历史API通过在地址栏中模拟新URL来完成导航的错觉。如果您使用的是较旧的浏览器，这将不起作用。您将需要使用HashLocation组件。

When you hit refresh, you bypass all of the React and React Router code. The server gets the request for /joblist and it must return something. On the server you need to pass the path that was requested to the run method in order for it to render the correct view. You can use the same route map, but you'll probably need a different call to Router.run. As Charles points out, you can use URL rewriting to handle this. Another option is to use a Node.js server to handle all requests and pass the path value as the location argument.

例如，在Express.js中，它看起来是这样的:

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

请注意，正在传递请求路径以运行。为此，需要有一个服务器端视图引擎，可以将呈现的HTML传递给该引擎。在使用renderToString和在服务器上运行React时，还有许多其他注意事项。一旦页面在服务器上呈现，当你的应用程序在客户端加载时，它将再次呈现，并根据需要更新服务器端呈现的HTML。

2015-01-21 20:37:03

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1