I just deployed my react app build on c-panel. The app includes different routes and everytime I try to get to one of them I get 404 Not found
.
For example if I try to get to http://example.com/
it will enter the website, and if I'll press on a button which links me tohttp://example.com/articles
it will work. But If I'll try to get http://example.com/articles
from a link that I shared or just typing this address I'll get 404 Not found
. This is not happening when I'm running the develope mode on localhost.
I changed the homepage url - "homepage": "http://example.com",
in package.json and it did not effect.
My app root is wrapped with <Router>
function App() {
return (
<Provider store={store}>
<Router>
<React.Fragment>
<CssBaseline />
<Header title="exampletitle" />
<MobileHeader />
<Main />
<BottomNavbar />
</React.Fragment>
</Router>
</Provider>
);
}
And this is Main.js component which is maneuvered by the routes.
function Main(props) {
return (
<div>
<Switch>
<Route exact path="/" component={Homepage} />
<Route exact path="/about" component={About} />
<Route exact path="/signup" component={Registerpage} />
<Route exact path="/ap" component={Adminpage} />
<Route exact path="/signin" component={SignIn} />
<Route exact path="/userpanel" component={UserPanelPage} />
<Route path="/article/:category" component={Articlepage} />
<Route path="/articlepage/:id" component={ReadArticlePage} />
</Switch>
</div>
);
}
Can someone give me a clue how to make those pages load when I enter them directly by their link?
If your application is working for all the routes when you navigate using <Link>
and history.push
but throwing 404 Not Found when you type a URL other than http://example.com, say http://example.com/articles, directly in your browser, you need to:
Teach your server to handle 404s by redirecting to the index.html page.
You can do this in one of the following ways:
Also, check notes-on-client-side-routing and How to deploy on cPanel.