前言

React路由模式分为两种:

hashHistory:

比如 http://localhost:8080/#/login

browserHistory

比如 http://localhost:8080/login

browserHistory的好处大于hashHistory, 但是麻烦的地方就是,browserHistory路由模式,需要服务器的配置:

请求 http://localhost:8080/login 上的资源的时候,服务器会默认搜索当前目录下的login文件夹里的资源。但是logIn这个目录其实是不存在的,往往在刷新浏览器的时候,会==404Not fund==;

所以需要利用 nginx 里面的 try_files 去指定一个 fall back资源;

1、React router配置

import React from 'react';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';

import App from '@pages/App';

function About(props) {
    console.log('about', props);
    return <div>page: about</div>;
}

// 路由配置
const routerConfig = [
    {
        path: '/',
        component: App
    },
    {
        path: '/about',
        component: About
    }
];

function AppRouter() {
    return (
        // 只有当你的应用部署到服务器的二级目录的时候,才需要设置basename
        <Router basename="/react">
            <Switch>
                {routerConfig.map(n => {
                    return <Route path={n.path} exact component={n.component}></Route>;
                })}
            </Switch>
        </Router>
    );
}

export default AppRouter;

我这里在服务器配置了二级目录 react 作为请求目录,所以这里的 basename 需要配置成 /react。如果你的静态资源已经是在根目录是不需要设置这个的。

启动本地服务:

about

这个时候从首页点击跳到 about ,就能看到这种路由模式的路径了;

此时如果你刷新了浏览器,将会提示找不到about目录:

在这里插入图片描述

此时可以在webpack.config.js里面增加:

devServer {
	historyApiFallback: true
}

webpack 里面的 historyApiFallback 使用的是connect-history-api-fallback:

重启本地服务,再次刷新正常。

关于 connect-history-api-fallback

单页应用(SPA)一般只有一个index.html, 导航的跳转都是基于HTML5 History API,当用户在越过index.html 页面直接访问这个地址或是通过浏览器的刷新按钮重新获取时,就会出现404问题;

比如 直接访问/login, /login/online,这时候越过了index.html,去查找这个地址下的文件。由于这是个一个单页应用,最终结果肯定是查找失败,返回一个404错误。

这个中间件就是用来解决这个问题的

只要满足下面四个条件之一,这个中间件就会改变请求的地址,指向到默认的index.html:

1 GET请求

2 接受内容格式为text/html

3 不是一个直接的文件请求,比如路径中不带有 .

4 没有 options.rewrites 里的正则匹配

2、nginx 配置

location /react {
    alias /project/react/;
    # browserHistory模式 404问题
    try_files $uri $uri/ /react/index.html;
    index index.html;
    autoindex on;
    gzip on;
    add_header Access-Control-Allow-Origin '*';
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, OPTIONS';
    add_header Access-Control-Expose-Headers 'Accept-Ranges, Content-Encoding, Content-Length, Content-Range';
  }

autoindex on; 开启这个,输入到/react 会直接定向到index.html;

try_files 主要解决的是,如果在一些目录下找不到 index.html, 会最终有一个保底资源的路径就是 /react/index.html;

try_files $uri $uri/ /react/index.html;

浏览器输入 http://**:6002/react/about

会先查找 http://**:6002/react/about 是否有文件about.html存在;再查找/about/下是否有文件存在,如果都不存在,启动 /react/index.html;

==try_files 增加 $uri/ 可以解决 try_filesautoindex同时存在的时候,再输入/react不会自动定向到index.html的问题==;

参考文档

  1. connect-history-api-fallback

  2. nginx ~ try_files

最后修改日期:2019年10月1日

作者