webpack-dev-server与单页应用路由

﹏ヽ暗。殇╰゛Y 2024-04-18 13:03 19阅读 0赞

首先是三个使用React编写的文件：

**index.js：**

import React, {
         Component } from 'react';
    import ReactDOM from 'react-dom';
    import {
         BroswerRouter, Route } from 'react-router-dom';
    import Home from './Home';
    import List from './List';
    class App extends Component {
        
        render(){
        
            return (
                <BroswerRouter>
                    <Route path='/' component={
        Home}/>
                    <Route path='/list' componnet={
        List}/>
                </BroswerRouter>
            );
        }
    }

**Home.js：**

import React, {
         Component } from 'react';
    
    class Home extends Component {
        
        render() {
        
            return (
                <div>
                    HomePage
                </div>
            );
        }
    }
    
    export default Home;

**List.js：**

import React, {
         Component } from 'react';
    
    class List extends Component {
        
        render() {
        
            return (
                <div>
                    ListPage
                </div>
            );
        }
    }
    
    export default List;

从上面代码可以看见，我实现了一个及其简单的前端路由。

启动`webpack-dev-server`的服务之后，可以通过`localhost:8080`访问到首页，也就是`Home`模块渲染出来的页面：

![在这里插入图片描述][20190907001919413.png]

那么按照预期，当我们在地址栏中输入`localhost:8080/list`的时候便会显示出`List`模块所渲染的页面，可是事与愿违：

![在这里插入图片描述][20190907001934506.png]

会发现浏览器提示找不到这个资源，原因在于，通过地址栏直接输入地址，浏览器会想后端也就是`webpack-dev-server`请求`list.html`这个资源，而我们并没有，自然就会出现错误。

那怎么解决这个问题呢？

需要设置在配置文件中设置`devServer.historyApiFallback`：

{
        
       ...,
       devServer: {
        
           ...,
           historyApiFallback: true
       }
    }

这个配置项的作用是，当产生任意的404响应都会被替代为`index.html`。

可以想见，当向`webpack-dev-server`请求`list.html`时，会产生404响应，于是就返回了`index.html`，而目前地址栏中URL的路径是`/list`，于是`React Router`根据我们写的路由规则跳转到`List`模块。

（只是通过在地址栏输入URL来访问会出现这种问题，而在应用中则根本不会出现页面的刷新，也就不会产生向后端的请求，直接切换到List）

--------------------

查看官方文档我们知道，这个功能的实现是使用了`connect-history-api-fallback`这个包。

而这个包还有其他的一些配置。

historyApiFallback: {
        
      rewrites: [
        {
         from: /\/soccer/, to: '/soccer.html'}
      ]
    };

上面这样的配置就是指，当请求路径为`/soccer`时，就返回`/scoccer.html`这个页面。

而我们将`historyApiFallback`设置为`true`，则代表着请求路径无论是什么，都跳转到`index.html`由前端路由决定跳转。

--------------------

historyApiFallback: {
        
      rewrites: [
         {
        
          from: /^\/libs\/.*$/,
          to: function(context) {
        
            return '/bower_components' + context.parsedUrl.pathname;
          }
        }
      ]
    };

甚至还可以这么写，可以通过一个函数，来获得请求路径的相关信息，再根据这些信息返回相关页面。

[20190907001919413.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3b60fb295e4047d8966f8cf95f5e1e5c.png
[20190907001934506.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f1e64efaa89c4c1fb5021326ced5d02b.png