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

Posted

技术标签:

【中文标题】带有 BrowserRouter / browserHistory 的 React-router 在刷新时不起作用【英文标题】:React-router with BrowserRouter / browserHistory doesn't work on refresh 【发布时间】:2018-06-12 04:03:11 【问题描述】:

我有以下 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”。

【问题讨论】:

webpack-dev-server 仅提供构建目录中的文件。在您的情况下,是src/client 中的public 文件夹。因此找不到/src/client/home 尝试访问localhost:8080/home 【参考方案1】:

您在路由中提到的第一件事是具有路径/home 的主组件。所以你需要访问http://localhost:8080/home。此外,如果您尝试直接访问此 url,由于您使用的是browserHistory,它会给您此错误。如果你愿意,你可以在 react-router v4 中使用hashHistoryHashRouter,在这种情况下你需要访问http://localhost:8080/#/home。如果你想在 react-router v4 中继续使用browserHistoryBrowserRouter,那么你需要在你的webpack 中添加historyApiFallback: true

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;

【讨论】:

【参考方案2】:

你需要在你的 webpack 设置中添加这个:

devServer: 
  historyApiFallback: true,
, 

然后像这样启动你的服务器:

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

因为您希望 React-Route 处理路由而不是您的服务器。因此,无论 url 是什么,它都应该转到 index.html

【讨论】:

以上是关于带有 BrowserRouter / browserHistory 的 React-router 在刷新时不起作用的主要内容,如果未能解决你的问题,请参考以下文章

将位置传递给 BrowserRouter 的子节点 - React Router

React路由6.0

React路由6.0

react router问题, 找不到history

带有参数的 Laravel 资源导致其他路由抛出错误

React 中的 BrowserRouter 导致“无效的钩子调用”