Cue*_*ero 6 jsx reactjs react-router
在http:// localhost/about页面刷新时未找到代码报告404 .但是如果将browserHistory更改为hashHistory,它可以正常工作.
这是我的js文件.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';
import $ from 'jquery';
class App extends Component {
render() {
return (
<div>
<h1>APP!</h1>
<Link to="/about">/about</Link>
{this.props.children}
</div>
)
}
}
class About extends React.Component {
render() {
return (
<div>
<h2>About 33</h2>
</div>
)
}
}
var routes = (
<Router history={hashHistory}>
<Route path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/wealth" component={WealthExpectation} />
</Router>
)
$(document).ready(function() {ReactDOM.render(routes, document.getElementById("hello"))});
和html文件.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script type="text/javascript" src="/static/js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="/static/js/script.js"></script>
<!-- build:css -->
<link rel="stylesheet" type="text/css" href="/static/bower_modules/c3/c3.min.css">
<!-- endbuild -->
</head>
<body>
<div id="hello">a</div>
<div id="world"></div>
</body>
</html>
我已经阅读了react-router v2.0上的问题浏览器历史记录无效,React-router网址在手动刷新或写入时不起作用.对于第一个,我已经设置了绝对路径的路径,但仍然没有工作.对于第二个,我尝试导入express但失败了('未捕获的TypeError:无法读取未定义'的属性'原型').
jma*_*rje 16
为了扩展Phi Nguyen的答案,hashHistory的工作原理和browserHistory失败是因为hashHistory是一种'hack'或解决方法,允许你的应用程序在没有浏览器注意的情况下操纵URL GET并向你的服务器发送请求.基本上哈希之后的所有内容都会被忽略.
browserHistory通常是首选,因为它看起来更好,但您不再获得散列解决方法,并且您需要其他方法来阻止您的浏览器尝试向您的服务器发送请求.如果您使用webpack,则有一种简单的方法可以使所有请求回退到单个请求.例如:
GET到http:// localhost:8080 /和a GET到http:// localhost:8080/about都会回退到http:// localhost:8080 /并且react-router会处理/ about.(这就是你能够导航到/关于罚款的原因,但是如果你刷新就会收到404错误,你发送的GET服务器上有一个/不在服务器上)
为此,您需要实现名为history api fallback的webpack功能.有两种方法可以做到这一点.
在react-router docs/tutorial中,您可以将start脚本设置为如下所示:
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
对于有此错误的人来说,--history-api-fallback是重要的部分.
或者您可以更改您的webpack.config.js文件以在您的开发服务器上处理此问题.
devServer: {
historyApiFallback: true,
...other stuff..
},
另一种简单且低成本的方法是让Apache将任何请求映射到您的React应用程序.例如:http://localhost/about内部通过http://localhost/[my-own-html-file.html]
例如,如果我们的React应用程序启动index.html,您需要.htaccess在React应用程序上创建一个文件并插入以下代码:
# Map all non-existing URLs to be processed by index.html,
# so any URL that doesn't point to a JS file, CSS file, etc etc...
# goes through my React app.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
RewriteRule ^ index.html [L]
</IfModule>
顺便说一下,这个HTACCESS代码改编自Drupal 8:https: //github.com/drupal/drupal/blob/8.2.x/.htaccess
小智 1
为了使用 browserHistory，您需要实现一个 Express 服务器来处理真实的 URL。hashHistory 不需要快速服务器。
请查看以下指南：
https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md
| 归档时间： |
|
| 查看次数： |
17507 次 |
| 最近记录： |