Это мой первый раз, когда я использовал ReactJS и не был моим проектом, однако я пытаюсь перенаправить любые несуществующие маршруты на 404 страницу, которую я сделал. Моя 404 страница в настоящее время отображается так, как предполагалось, когда любой URL-адрес, который не соответствует маршруту, вводится отдельно, когда URL содержит /#/
.
Например, этот URL-адрес будет перенаправлен на мою страницу 404:
http://localhost:8080/non-existent-url
Но этот URL-адрес будет загружать только мой маршрут по умолчанию (домашняя страница):
http://localhost:8080/#/non-existent-url
Я не знаю, для чего нужен /#/
, и кажется, что приложение отобразит страницы с допустимыми маршрутами с или без него.
Файл с удаленными маршрутами:
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):
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;
Как перенаправить пользователей на мою страницу 404, если URL-адрес не соответствует маршруту и, когда URL-адрес содержит /#/
?