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

当前回答

使用useEffect读取URL并应用您想要的更改。

例如，一个页面有一个按钮，打开一个滑块。单击按钮时，将向URL中添加滑块的查询参数，并打开滑块。

问题-在刷新页面时打开滑块，加载的页面不显示打开的滑块，即使查询参数存在。

解决方案:添加一个useEffect，读取“slider”查询参数，并运行按钮处理程序。为滑块查询参数添加一个状态变量，并将其包含在useEffect的依赖数组中。

你不需要担心后端请求，假设在滑块组件中有一个。

2022-12-25 14:05:44

其他回答

因为我使用ASP。NET Core，类似这样的东西帮助了我:

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var url = Request.Path + Request.QueryString;
        return App(url);
    }

    [Route("App")]
    public IActionResult App(string url)
    {
        return View("/wwwroot/app/build/index.html");
    }

}

基本上是在ASP上。NET MVC端，所有不匹配的路由都将落在startup.cs中指定的Home/Index中。在索引中，可以获取原始请求URL并将其传递到任何需要的地方。

文件startup.cs

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

2019-03-11 04:41:36

当我使用apache(Httpd)服务器时，我也面临同样的问题。我解决了咆哮这种方式，为我工作100%。

步骤1:

进入/etc/httpd/conf/httpd.conf /对于新版本，进入etc/apache2/apache2.conf 将AllowOverride None更改为AllowOverride All。重启apache服务器。

步骤2:

构建完成后，将.htaccess文件放入根文件夹。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

2022-07-18 07:05:50

Webpack开发服务器有一个选项可以启用此功能。打开包。Json和添加——history-api-fallback。这个解决方案对我很有效。

react-router-tutorial

2016-09-09 23:18:32

这里的答案都非常有用。配置我的Webpack服务器以期望路由对我有效。

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

historyApiFallback为我修复了这个问题。现在路由工作正确，我可以刷新页面或直接输入URL。没有必要担心Node.js服务器上的变通方法。这个答案显然只适用于使用Webpack的情况。

查看我对React-router 2.0 browserHistory在刷新时不工作的回答，了解为什么需要刷新的更详细原因。

2016-05-26 00:26:26

这可以解决你的问题。

在生产模式下的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

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

推荐文章

最新文章

标签