如何解决"404"问题直接访问React中的组件时发生错误 [英] How to fix "404" error when directly accessing a component in react
问题描述
我正在重做我的投资组合以做出反应.太新了.我在这里面临的问题是，当我将react项目托管到服务器上时，一切工作正常，使用进行路由，在导航时将页面移至顶部，等等. 但是我观察到，当我关闭网站标签并尝试直接访问组件时.例如，如果我执行" http://mywebsite.com "，则该方法有效.但是，如果我执行" http://mywebsite.com/contact "，页面就会显示404，是的，该组件确实存在.两种方法都可以在localhost上很好地工作，但不能在托管服务器(Hostinger)上使用
I am redoing my portfolio in react. So fairly new to it. The problem that I am facing here is, when I've my react project hosted to a server, everything works fine, routing using , moving the page to top upon navigation etc., But I've observed that when I am closing my website tab and trying to directly access a component. For example, if I do "http://mywebsite.com", it works. But if I do "http://mywebsite.com/contact" the page goes 404, and yeah the component does exists. Either approach works well in localhost, but not on the hosted server (Hostinger)
我尝试在网上搜索，但找不到任何可靠的答案，StackOverflow上的许多帖子都说与服务器有关的错误，但没有显示如何解决.
I tried searching over the web, but could not find any reliable answers, many of the posts on StackOverflow say its server related error, but does not show how to fix it.
在以下情况下，react-router url不起作用刷新或手动编写
反应直接访问URL但不在开发中时，-router-dom构建会给出404
这是我的导航链接和路线设置的方式-
This is how my navlinks and route are setup -
class mainContent extends React.Component {
render() {
return (
<Router>
<div>
<nav id="navbar">
<span>
<NavLink exact to="/">
PRASHANTH KUMAR SRIPATHI
</NavLink>
</span>
<li-item>
<NavLink to="/contact" id="nav-item" className="item">
<i className="fa fa-comments-o" /> Contact
</NavLink>
</li-item>
<li-item>
<NavLink to="/resume" id="nav-item" className="item">
<i className="book icon" /> Resume
</NavLink>
</li-item>
<li-item>
<NavLink to="/portfolio" id="nav-item" className="item">
<i className="list alternate icon" /> Portfolio
</NavLink>
</li-item>
<li-item>
<NavLink exact to="/" id="nav-item" className="item">
<i className="home icon" /> Home
</NavLink>
</li-item>
{/*<li-item>
<NavLink to="/about/" className="item">
<i className="address card icon" /> About
</NavLink>
</li-item> */}
</nav>
<div className="content" id="main">
<Switch>
<Route exact path="/" component={home} />
<Route path="/contact" component={contactMe} />
<Route path="/resume" component={resume} />
<Route path="/portfolio" component={portfolio} />
{/*<Route path="/about" component={about} />*/}
</Switch>
</div>
<div className="footer">
<footer className="relative">
© 2019 - Prashanth Kumar Sripathi
</footer>
</div>
</div>
</Router>
);
}
}
如何解决此问题，使其不显示404.我不想通过将其重定向到" http://mywebsite.com "，因为如果我要建立另一个具有摘要的站点，则需要共享，然后将其重新路由到索引页面.
How can I fix this so that it does not show 404. I don't want to fix this in a way that it is redirected to "http://mywebsite.com" because if I were to built another site that has cope snippets I need to share which would just reroute it to index page.
推荐答案
我不确定您是否仍然需要帮助，但是我能够与Hostinger的一个朋友一起工作，这是您的.htaccess文件所需要的包含.
I am not sure if you need help still but I was able to work with a friend of mine at Hostinger and here is what your .htaccess file will need to include.
精确复制并粘贴:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
这篇关于如何解决"404"问题直接访问React中的组件时发生错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
