zoukankan      html  css  js  c++  java
  • webpack解决单页面路由问题

    index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html template</title>
      </head>
      <body>
        <div id='root'></div>
      </body>
    </html>

    index.js

    import React, {Component} from 'react';
    import { BrowserRouter, Route } from 'react-router-dom';
    import ReactDom from 'react-dom';
    import Home from './home';
    import List from './list';
    
    class App extends Component{
      render() {
        return (
          <BrowserRouter>
            <div>
              <Route path='/' exact component={Home} />
              <Route path='/list' component={List} />
            </div>
          </BrowserRouter>
        )
      }
    }
    ReactDom.render(<App/>, document.getElementById('root'));

    home.js

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

    list.js

    import React, {Component} from 'react';
    
    class List extends Component{
      render() {
        return (
          <div>list</div>
        )
      }
    }
    
    export default List;
    我们运行npm run dev ("webpack-dev-server --config ./build/webpack.common.js")。访问localhost:8080/访问没有问题,访问localhost:8080/list说找不到这个页面,这是为什么。
    原因是当你这么去访问一个网址的时候,后端,也就是现在的webpackDevServer会因为访问的是后端的一个list页面。但是我们dist下只有index.html,并没有list这个页面。所以提示页面不存在,这是前端做单页应用的时候经常会遇到的一个问题。在webpackDevServer里面要解决这个问题,打开webpack官网。https://webpack.js.org/configuration/dev-server#devserverhistoryapifallback
    我们这里只要配置一个historyApiFallback就可以了
    module.exports = {
      devServer: {
        historyApiFallback: true
      }
    };
    这样我们重新访问localhost:8080/list的时候就没有问题了。他的原理是后端服务器如果发现并没有这个/list地址。就会偷摸的转化成根路径的请求,所以不管请求什么地址,都会请求index.html,里面有main.js,也就是我们的业务代码,这里面的路由就能正常的生效。
    这里面还可以有其他的配置
    historyApiFallback: {
      rewrites: [
        { from: /abc.html/, to: '/index.html' },
      ]
    },
    这里面如果访问的是abc.html的时候,转化成index.html。所以这里填一个true,等价于from任何路劲,都to到index.html上。
  • 相关阅读:
    vue-router路由
    前端路由与后端路由
    getsupportfragmentmanager 没有这个方法
    Glide使用
    Android使用Glide加载Gif.解决Glide加载Gif非常慢问题
    电脑卡,eclipse Android stadio 卡,什么都卡解决方法
    Service IntentService区别 (面试)
    枚举
    Android stadio litepal
    Android 单元测试
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10885417.html
Copyright © 2011-2022 走看看