zoukankan      html  css  js  c++  java
  • webpack-webpackDevServer解决单页面应用路由的问题

    npm install react-router-dom --save

    react页面:

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

    Home:

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

    List:

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

    export default List;

    当我们启动服务器的时候,发现HomePage可以正常显示,而切换到'http://localhost:8080/list'的时候会提示不存在,因为浏览器默认会展示list.html的内容,然而并不存在,所以失败。我们只需要在devServer中配置即可:

    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true,
        historyApiFallback:true
    }

    historyApiFallback除了是一个布尔值,还可以是一个对象:

    devServer: {
        historyApiFallback: {
          rewrites: [
            { from: /abc.html/, to: '/index.html' }
          ]
        }
      }

    上述配置意思是当我们访问abc.html时,实际访问的事index.html。而当我们设置为true的时候,实际上等价于:

    devServer: {
        historyApiFallback: {
          rewrites: [
            { from: /.*/, to: '/index.html' }
          ]
        }
      }

    一般来说,我们只要设置为true就可以解决路由上的问题,除非有一些特殊情况,才需要配置成一个对象。

  • 相关阅读:
    codevs 3160 最长公共子串(SAM)
    noi2018d2t1
    后缀自动机
    [Scoi2014]方伯伯的玉米田
    【NOI2017】泳池
    【BZOJ2560】串珠子
    POJ 1737 统计有n个顶点的连通图有多少个 (带标号)
    【BZOJ3590】[Snoi2013]Quare 状压DP
    【BZOJ1095】【ZJOI2007】捉迷藏 [动态点分治]
    BZOJ1316: 树上的询问
  • 原文地址:https://www.cnblogs.com/jingouli/p/12336080.html
Copyright © 2011-2022 走看看