This is my first time using ReactJS and is not my project however, I am trying to redirect any non-existent routes to a 404 page that I have made. My 404 page is currently displaying as intended when any URL that doesn't match a route is entered apart from when the URL contains /#/
.
For example, this URL will redirect to my 404 page:
http://localhost:8080/non-existent-url
But this URL will only load my app's default route (homepage):
http://localhost:8080/#/non-existent-url
I don't know what the /#/
is for and it appears that the app will display pages with valid routes with or without it.
Stripped down routes file:
import React from "react";
import { Router, Route, IndexRoute, browserHistory, hashHistory, Redirect } from "react-router/es";
import willTransitionTo from "./routerTransition";
import App from "./App";
import DashboardContainer from "./components/Dashboard/DashboardContainer";
import DashboardAccountsOnly from "./components/Dashboard/DashboardAccountsOnly";
import NotFound from './components/NotFound';
const history = __HASH_HISTORY__ ? hashHistory : browserHistory;
class Auth extends React.Component {
render() {return null; }
}
const routes = (
<Route path="/" component={App} onEnter={willTransitionTo}>
<IndexRoute component={DashboardContainer}/>
<Route path="/auth/:data" component={Auth}/>
<Route path="/dashboard" component={DashboardContainer}/>
<Route path='*' exact={true} component={NotFound} />
</Route>
);
export default class Routes extends React.Component {
render() {
return <Router history={history} routes={routes} />;
}
}
404 (NotFound) component:
import React from 'react';
import {Link} from "react-router/es";
import Translate from "react-translate-component";
var image = require("assets/404.png");
const NotFound = () =>
<div className="grid-block main-content wrap regular-padding">
<div className="grid-content small-12" style={{marginTop:"200px"}}>
<div style={{ textAlign:"center"}}>
<img style={{marginBottom:"1.2rem"}} src={image} />
<h3>404 page not found</h3>
<p>This page does not exist.</p>
<Link className="button" to={"/dashboard"}>
<Translate style={{color:"#fff"}} content="account.home" />
</Link>
</div>
</div>
</div>
export default NotFound;
How can I redirect users to my 404 page when a URL doesn't match any route and when the URL contains /#/
?
browserHistory
instead ofhashHistory
likeconst history = browserHistory;
– Shubham Khatri