How to fix “404” error when directly accessing a component in react

问题

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.

回答1:

I can not comment so I have to answer it. I don’t know if you made a typo but in your route path to your contactme component is specified as contact so you should be able to access it by

http://mywebsite.com/contact

Instead of

http://mywebsite.com/contactme

回答2:

TL;DR Its a server issue and not a frontend code issue.

To answer your concern of route rendering 404.

The way SPA's are setup is you create your routes in frontend code using React Router in your example and let that library take care of your routing needs.

When a server request goes for a specific page like /contact server will then try to find index.html (in general OR equivalent depending on your server settings) inside contact directory and since it did not find any such path or file it will then return 404.

The workaround for that is you have to send/redirect all requests to specific routes to your SPA to the main index page and then let the main app (frontend) take care of it once its loaded.

Here are related React docs which is exactly what you are looking for: https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

Possible solution depends on your server setup but to generalize:

For Node/Express you can use following code

app.get('*', function (req, res) {
  res.send('index_path')
})

Netlify: https://www.netlify.com/docs/redirects/

More variant including Github Pages, Heroku, Firebase, PHP, Ruby on Rails, .Net, Flask, etc can be found here:

https://css-tricks.com/redirect-web-page/ OR
https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

回答3:

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>

来源：https://stackoverflow.com/questions/56248347/how-to-fix-404-error-when-directly-accessing-a-component-in-react

标签

reactjs

react-router

hosting