- 首页
- 其他开发
- 反应路由能够处理不同的 url 路径，但 tomcat 返回 404 不可用资源
反应路由能够处理不同的 url 路径，但 tomcat 返回 404 不可用资源
[英] react routing is able to handle different url path but tomcat returns 404 not available resources
本文介绍了反应路由能够处理不同的 url 路径，但 tomcat 返回 404 不可用资源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 reactjs 的新手，我在 reactjs 中有一个小项目可以玩和学习.我需要输入将基于 url 路径显示的标题.所以以下是我的 index.js 处理路由:
const history = useRouterHistory(createHistory)({基本名称:'/测试'})类 Tj 扩展了 React.Component {使成为() {返回 (<路由器历史={历史}><Route path="/"} component={Bridge} ><IndexRoute 组件={Home}/><路由路径={"user"} 组件={T}/><Route path={"home"} component={Home}/></路线><Route path={"/t/"} 组件={Bridge2} ><IndexRoute 组件={T}/><Route path={"contact"} component={Home}/></路线></路由器>);}}使成为(<提供者商店={商店}><Tj/></提供者>,window.document.getElementById('mainContainer'));
如您所见，我使用 test 作为根目录，并根据用户对 url 的输入决定应该使用哪个标头.还有Bridge2.js:
export class Bridge2 extends React.Component {使成为() {返回 (<div><div className="row"><Header2/>
<div className="row">{this.props.children}
);}}
和Bridge.js:
export class Bridge extends React.Component {使成为() {//警报(this.props.children.type);var 内容；如果(this.props.children.type){内容=<div className="row"><标题/>
<div className="row">{this.props.children}
;}别的{内容=
<div className="row"><标题/>
<div className="row">{this.props.children}
;}返回 (内容);}}
当我在 webpack 开发服务器中运行它时，一切正常.例如，当我使用 http://localhost:3003/test/ 加载 bridge.js 时，如果我运行 http://localhost:3003/test/t/加载了bridge2.js，这是预期的.
然而，由于 web pack 开发服务器不是生产服务器，我使用 tomcat，现在我使用 eclipse web 应用程序项目，我将 bundle.js 文件和 index.html 复制到那里.现在的问题是，当我运行 tomcat 服务器时，它能够识别并正常显示此路径:
http://localhost:8080/test/ 但是对于 http://localhost:8080/test/t/ 我得到:
<块引用>HTTP 状态 404 -/test/t/
基本上是说资源文件不可用.据我观察，这在编码中不是问题，因为路由在 web pack dev server 中工作正常，但是当涉及到 tomcat 时，似乎反应路由无法处理它.我在做什么有什么问题吗?这种方式完全可行吗?有人可以帮忙吗?
解决方案
首先，在使用 react-router 时，您必须了解以下差异.
当你在浏览器中输入localhost:3003/test/时，它会请求服务器，然后它会收到/test/index.html，js bundle, css, ...
之后，无论何时单击内部链接(例如 localhost:3003/test/t/)，您的浏览器都不会再次请求服务器.React-router 将解析这个客户端，重新渲染页面的部分，并更新浏览器的地址栏(使用 HTML5 pushstate())，而不会触发另一个服务器请求.
在地址栏直接输入localhost:3003/test/t/，浏览器会请求服务器，Tomcat没有/test/t/index.html 左右，它返回一个 404.这是因为 Tomcat 对 react-redux 和 javascript 一无所知.
处理此问题的一种方法是将 404 错误配置为转发到 /test/index.html.这可能是您的 webpack 开发服务器默认配置的方式.
如果您在我们的 Tomcat 前面有一个，那么有很多在 apache 上执行此操作的示例.搜索html5 pushstate apache config.
这是一个例子:
httpd.conf:
<代码>...<IfModule mod_rewrite.c>重写引擎开启重写基数/重写规则 ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则./index.html [L]</IfModule>...如果您单独使用 Tomcat，您可以尝试在 web.xml 中指定它，在您的 .war 文件中:
<代码>...<错误页面><错误代码>404</错误代码><location>/index.html</location></错误页面>...
请注意，这不是 react-router 特定的问题，每个使用 HTML5 pushstate() 的应用程序都需要以某种方式处理这个问题.不过，Javascript 服务器可能会更无缝地处理这个问题.
I am new in reactjs and I have a little project in reactjs to play with and learn it. I need to have to type of headers which will be shown based on url paths. So the following is my index.js which handles the routing:
const history = useRouterHistory(createHistory)({
basename: '/test'
})
class Tj extends React.Component {
render() {
return (
<Router history={history}>
<Route path={"/"} component={Bridge} >
<IndexRoute component={Home} />
<Route path={"user"} component={T} />
<Route path={"home"} component={Home} />
</Route>
<Route path={"/t/"} component={Bridge2} >
<IndexRoute component={T} />
<Route path={"contact"} component={Home} />
</Route>
</Router>
);
}
}
render(
<Provider store={store}>
<Tj/>
</Provider>,
window.document.getElementById('mainContainer'));
As you can see I am using test as a root directory and based on user's input for url I decide which header should I use. Also here is Bridge2.js:
export class Bridge2 extends React.Component {
render() {
return (
<div>
<div className="row">
<Header2/>
</div>
<div className="row">
{this.props.children}
</div>
</div>
);
}
}
and Bridge.js:
export class Bridge extends React.Component {
render() {
// alert(this.props.children.type);
var Content;
if(this.props.children.type){
Content=<div>
<div className="row">
<Header/>
</div>
<div className="row">
{this.props.children}
</div>
</div>;
}
else{
Content=<div>
<div className="row">
<Header/>
</div>
<div className="row">
{this.props.children}
</div>
</div>;
}
return (
Content
);
}
}
When I run this in webpack dev server every thing works fine. For instance when I use http://localhost:3003/test/ bridge.js is loaded and if I run http://localhost:3003/test/t/ bridge2.js is loaded which is expected.
However since web pack dev server is not a production server I use tomcat and for now I use the eclipse web application project and I copied my bundle.js file and index.html over there. Now the problem is when I run the tomcat server it is able to recognize and show this path fine:
http://localhost:8080/test/ but when for http://localhost:8080/test/t/ I get:
HTTP Status 404 - /test/t/
which basically says the resource file is not available. As far as what I observe this is not a problem in coding since routing works fine in web pack dev server but when it comes to tomcat it seems that react routing is not able to handle it. Is there anything wrong with what I am doing? Is doable this way at all? Can anyone help?
解决方案
First, you must be aware of the following differences when using react-router.
When you enter localhost:3003/test/ in your browser, it will request the server, and then it will receive /test/index.html, the js bundle, css, ...
After that, whenever you click an internal link (eg. localhost:3003/test/t/), your browser will not request the server again. React-router will resolve this client-side, re-render portions of the page, and update browser's address bar (using HTML5 pushstate()), without triggering another server request.
When you enter localhost:3003/test/t/ directly in the address bar, your browser will request the server, and Tomcat does not have /test/t/index.html or so, and it returns a 404. It's because Tomcat doesn't know anything about react-redux nor javascript.
A way to handle this is to configure 404 errors to be forward to /test/index.html. It's probably how your webpack dev server is configured by default.
There is plenty of examples of doing this on apache, if you have one in front of our Tomcat.
Search for html5 pushstate apache config.
Here is an example:
httpd.conf:
...
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
...
If you are using Tomcat alone, you may try to specify this in the web.xml, inside your .war file:
...
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
...
Note that this is not a react-router specific problem, every app that uses HTML5 pushstate() needs to handle this somehow. Javascript servers may handle this more seamlessly though.
这篇关于反应路由能够处理不同的 url 路径，但 tomcat 返回 404 不可用资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
