带有 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 中使用hashHistory
或HashRouter
,在这种情况下你需要访问http://localhost:8080/#/home
。如果你想在 react-router v4 中继续使用browserHistory
或BrowserRouter
,那么你需要在你的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 在刷新时不起作用的主要内容,如果未能解决你的问题,请参考以下文章