如何修复“404"在反应中直接访问组件时出错 [英] How to fix "404" error when directly accessing a component in react

问题描述

我正在重做我的作品集以应对.所以对它来说相当新.我在这里面临的问题是，当我将 React 项目托管到服务器时，一切正常，使用路由，导航时将页面移动到顶部等，但是我观察到，当我关闭网站选项卡并尝试直接访问组件时.例如，如果我执行http://mywebsite.com"，它会起作用.但是，如果我执行http://mywebsite.com/contact"，页面会显示 404，是的组件确实存在.这两种方法都适用于本地主机，但不适用于托管服务器 (Hostinger)

我尝试在网络上搜索，但找不到任何可靠的答案，StackOverflow 上的许多帖子都说与服务器相关的错误，但没有说明如何修复它.

React-router url 在以下情况下不起作用手动刷新或写入

如何解决访问 url 中的路由时找不到 404 的问题.(SPA 反应)

react-router-dom Build 在直接访问 URL 时给出 404，但不在开发中

这就是我的导航链接和路线的设置方式 -

class mainContent 扩展 React.Component {使成为() {返回 (<路由器><div><nav id="导航栏"><跨度><NavLink 精确到="/">帕尚·库马尔·斯里帕蒂</NavLink></span><li-item><NavLink to="/contact" id="nav-item" className="item"><i className="fa fa-comments-o"/>接触</NavLink></li-item><li-item><NavLink to="/resume" id="nav-item" className="item"><i className="书本图标"/>恢复</NavLink></li-item><li-item><NavLink to="/portfolio" id="nav-item" className="item"><i className="列表备用图标"/>文件夹</NavLink></li-item><li-item><NavLink 精确到="/" id="nav-item" className="item"><i className="主页图标"/>家</NavLink></li-item>{/*<i className="地址卡图标"/>关于</NavLink></li-item>*/}</nav><div className="content" id="main"><开关><路由精确路径="/" component={home}/><Route path="/contact" component={contactMe}/><Route path="/resume" component={resume}/><Route path="/portfolio" component={portfolio}/>{/*<Route path="/about" component={about}/>*/}</开关>

<div className="footer"><footer className="relative">&复制;2019 - Prashanth Kumar Sripathi</页脚>

</路由器>);}}

我怎样才能解决这个问题，使它不显示 404.我不想以重定向到http://mywebsite.com" 因为如果我要建立另一个包含相应代码段的网站，我需要共享这些代码段，只需将其重新路由到索引页面.

解决方案

我不确定您是否还需要帮助，但我能够与我在 Hostinger 的一位朋友一起工作，这是您的 .htaccess 文件所需的内容包括.

完全复制和粘贴:

重写引擎开启重写基数/重写规则 ^index.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-l重写规则./index.html [L]</IfModule>

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)

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 urls don't work when refreshing or writing manually

How to fix 404 not found when accessing the routes in the url. (SPA REACT)

react-router-dom Build Giving 404 When Accessing URL Directly, But Not In Development

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">
              &copy; 2019 - Prashanth Kumar Sripathi
            </footer>
          </div>
        </div>
      </Router>
    );
  }
}

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.

解决方案

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.

Copy and paste exactly:

<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"在反应中直接访问组件时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！