带有 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"(根据我的 routes.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/#/家.如果你想像 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屋！