带有BrowserRouter/browserHistory的React-router在刷新时不起作用 [英] React-router with BrowserRouter / browserHistory doesn't work on refresh

问题描述

我有以下Webpack配置文件:

I have the following webpack config file:

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 "(根据我的route.jsx并在运行webpack-dev-server之后)

all I am trying to do is run my app on localhost, however when I hit: "http://localhost:8080/src/client/home" (as per my routes.jsx and after running 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".

"Cannot GET /src/client/home".

推荐答案

您在路由中提到的第一件事是具有路径/home的home组件.因此，您需要访问http://localhost:8080/home.另外，如果您尝试直接访问此URL，由于使用的是browserHistory，它也会给您此错误.如果需要，可以在react-router v4中使用hashHistory或HashRouter，在这种情况下，您将需要访问http://localhost:8080/#/home.如果您想像在react-router v4中一样继续使用browserHistory或BrowserRouter，那么您将需要在Webpack中添加historyApiFallback: true

First thing you have mentioned in your routes as the home component to have path /home. So you need to visit http://localhost:8080/home. Also if you try to access this url directly, it will give you this error since you are using browserHistory. If you want you can use hashHistory or HashRouter in react-router v4, in which case you will need to visit http://localhost:8080/#/home. If you want to continue using browserHistory or BrowserRouter as in react-router v4, then you will need to add historyApiFallback: true in you 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/'
  },
  devServer: {
    historyApiFallback: true
  },
  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;

这篇关于带有BrowserRouter/browserHistory的React-router在刷新时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！