Как отображать 404, когда URL-адрес не соответствует ни одному маршруту, и когда URL содержит /#/, используя ReactJS

Это мой первый раз, когда я использовал 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-адрес содержит /#/?

Ответы

Ответ 1

Для реактивного маршрутизатора < 4.0

Если вы хотите отобразить страницу с ошибкой и не изменить путь

<Route path='*' exact={true} component={errorcomponent} />

Если вы хотите отобразить страницу с ошибкой и изменить путь

<Route path='/error' component={errorcomponent} />
 // use redirect to  change the Url
<Redirect from='*' to='/error' />

Для реактивного маршрутизатора 4

Сохраните путь

<Switch>
    <Route exact path="/" component={component} />
    <Route component={errorcomponent} />
 </Switch>

изменить Url.

 <Switch>
    <Route path="/comp" component={component} />
   <Redirect to="/error" />
 </Switch>

тег переадресации должен быть помещен везде, где вы разместите тег маршрута, включите переключатель.

Ответ 2

Основываясь на том, что я вижу в вашем коде, попытка переключения между историей хэша и историей браузера просто не сработает. В тот момент, когда вы нажмете "/#" на все, что он сломает и всегда попадет на ваш общий маршрут "/".

URL-адреса хэшей - это более старый способ обработки вещей, которые больше не должны быть проблемой. См. Этот вопрос SO и его принятый ответ для более подробной информации.

Делать такие ссылки, как Twitter, Hash-Bang #! URL-адрес

Итак, если у вас нет сумасшедшей причины по-прежнему поддерживать хэши в URL-адресах, оставьте историю хэша и просто используйте историю браузера. Тогда ваши маршруты, как определено в вашем предоставленном образце кода, должны работать.

Ответ 3

Вы можете получить доступ к значению location.hash и установить его в пустую.

Но, как уже хорошо описано, это стандартный http в течение многих лет, и вам все равно, за исключением веских причин.

Вы можете видеть это как http://localhost:8080/?non-existent-url, это означает перейти к / с параметром пути non-existent-url, вы тоже хотите перенаправить?

Ответ 4

Существует несколько небезопасных символов, которых следует избегать при создании URL-адреса, один из которых #.

Символ "#" небезопасен и всегда должен быть закодирован, поскольку он используется в World Wide Web и в других системах, чтобы разграничить URL-адрес от фрагмент/якорный идентификатор, который может следовать за ним.

Сервер при разрешении маршрута передаст строку перед #, чтобы получить запрашиваемую страницу, а затем будет перемещен точный фрагмент страницы, если что-то указано с помощью строки после # до любого небезопасного символа.

Итак, в вашей строке перед # пусто, поэтому переадресовываем на /, который является допустимым маршрутом, и перенаправляет его на component App. И поскольку ни один фрагмент не определен, почему ничего не происходит.

Чтобы сделать это, нам нужно сообщить nginx or any other server, чтобы удалить все # перед отправкой запроса вперед.

В этом случае

http://localhost:8080/#/non-existent-url

будет преобразован в,

http://localhost:8080/non-existent-url

Что решит проблему. См. Эту ссылку, чтобы увидеть Как переписать правило в nginx

Ответ 5

Вы можете использовать этот

<Route exact insecure component={NotFound} />

Ответ 6

Проблема заключается в том, что в URL http://localhost:8080/#/non-existent-url маршрут является просто /, поэтому он поражает ваш компонент приложения. Назначение # в стандартном URL-адресе означает переход к местоположению внутри страницы. Поэтому ваш url говорит "перейдите на страницу/и перейдите в это конкретное место после загрузки страницы".

С точки зрения маршрутизации/это ваш маршрут, поэтому он найден. Честно говоря, если вы не выполняете 5-летний стиль маршрутизации хеширования, это ведет себя так, как предполагалось. В этом случае (если вы застряли с людьми, помещенными на эти страницы или что-то еще), чтобы заставить "не найти" что-то подобное, я бы начал переписывать URL.

Приложения SPA уже переписывают входящие URL-адреса на сервере, поэтому все они направлены на одну страницу. Добавьте правило, которое, как часть перезаписи, удаляет # (если вы не используете его в своем приложении).

Итак, http://localhost:8080/#/non-existent-url будет внутренне обрабатываться приложением как http://localhost:8080/non-existent-url.

Ответ 7

вы должны Router компонент как родительский элемент Route и добавить этот маршрут

<Route path='*' component={() => NotFound} />

const routes = (
    <Router>
        <div>
            <Route path="/" component={App} onEnter={willTransitionTo}
            <IndexRoute component={DashboardContainer}/>
            <Route path="/auth/:data" component={Auth}/>
            <Route path="/dashboard" component={DashboardContainer}/>

            <Route path='*' component={() => NotFound} />
        </div>
    </Router>
);