码迷,mamicode.com
首页 > Web开发 > 详细

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

时间:2020-02-25 16:05:13      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:需要   less   start   art   跳转   test   files   amp   自带   

摘要

  在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由。在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现404,为了解决这个问题,需要对服务器做简单的改动。

 

React路由应用真实URL

一、React路由变更

  hash路由形式的URL代码如下:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

  hash路由会自带 # 号,我们需要去掉 # 号,将hash路由形式替换为browser路由形式,具体代码如下:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

二、浏览器页面404解决

  本地运行npm start后,URL为真实的URL,但是npm run build打包项目,上传项目到服务器后,实际项目页面出现404错误。当页面刷新时,浏览器会向服务器请求我们在服务器设置的默认URL,服务器实际会去找根目录下的build好的html文件,发现找不到,因为实际上我们的服务器并没有这样的物理路径/文件等,或者我们没有配置处理这个路由,所以内容无法显示,只有提示404错误。为了解决页面404的问题,我们只需要在服务器上配置处理URL,由于我使用的是nginx,故接下来就讲述如何去配置nginx。

三、Nginx服务器配置

  配置nginx解决页面404错误,只需要访问任何路由地址都访问index.html,这样就可以自动被React-Router处理,并进行无刷新跳转。我们在nginx服务器的location中添加代码行 try_files $uri $uri/ /index.html 即可,部分配合代码如下:

server
{
    listen 80 default_server;
    listen [::]:80 default_server;

    root /usr/local/react/build;  //项目打包代码地址

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name example/test;  //项目服务访问地址

    location / {
        try_files $uri $uri/ /index.html; 
    }
}

 

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

标签:需要   less   start   art   跳转   test   files   amp   自带   

原文地址:https://www.cnblogs.com/BlueBerryCode/p/12358140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!