带有BrowserRouter / browserHistory的React-router在刷新时不起作用

node.js Webpack

镜风Davaid

2020-05-28

我有以下webpack配置文件:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
    entry: [
        APP_DIR + '/config/routes.jsx',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
  output: {
    publicPath: 'http://localhost:8080/src/client/public/'
  },
  module : {
    loaders : [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_DIR,
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      }, 
      {
        test: /\.json$/, 
        loader: "json-loader"
     }
    ]
  }
};

module.exports = config;

我想要做的就是在本地主机上运行我的应用程序,但是当我点击:“ http:// localhost:8080 / src / client / home ”(根据我的routes.jsx并在运行webpack-dev-server之后)

import React from 'react';

import { Route, Router, browserHistory } from 'react-router';
import ReactDOM from 'react-dom';

import Wrapper       from './../components/wrapper.jsx';
import Home          from './../components/home.jsx';
import Projects      from './../components/projects.jsx';
import SingleProject from './../components/projectContent/singleProject.jsx';
import About         from './../components/aboutUs.jsx'

ReactDOM.render((
    <Router history={browserHistory} >
        <Route path="/" component={Wrapper} >
            <Route path="home" component={Home} />
            <Route path="projects" component={Projects} />
            <Route path="projects/:id" component={SingleProject} />
            <Route path="about" component={About} />
        </Route>
    </Router>
), document.getElementById('app'));

我懂了

“无法获取/ src / client / home”。

第4187篇《带有BrowserRouter / browserHistory的React-router在刷新时不起作用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
泡芙 2020.05.28

您需要在webpack设置中添加它:

devServer: {
  historyApiFallback: true,
}, 

然后像这样启动服务器:

webpack-dev-server --config webpack.config.js

Because you want React-Route to handle the route instead of your server. So no matter what the url is it should goes to index.html.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android