Сервер nginx настраивает режим маршрутизации браузера React и избегает ошибки 404.

React.js

предисловие

Существует два типа режимов маршрутизации React:

hashHistory:

Напримерhttp://localhost:8080/#/login

browserHistory

Напримерhttp://localhost:8080/login

browserHistoryпреимущества больше, чемhashHistory, но беда в том,browserHistoryРежим маршрутизации требует настройки сервера:

проситьhttp://localhost:8080/loginКогда ресурсы находятся на сервере, сервер по умолчанию будет искать ресурсы в текущем каталоге.loginресурсы в папке. ноlogInЭтот каталог на самом деле не существует, часто при обновлении браузера он будет ==404Not fund==;

Поэтому вам нужно использовать nginx внутриtry_filesуказатьfall backресурс;

1. Реагировать на конфигурацию маршрутизатора

import React from 'react';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';

import App from '@pages/App';

function About(props) {
    console.log('about', props);
    return <div>page: about</div>;
}

// 路由配置
const routerConfig = [
    {
        path: '/',
        component: App
    },
    {
        path: '/about',
        component: About
    }
];

function AppRouter() {
    return (
        // 只有当你的应用部署到服务器的二级目录的时候，才需要设置basename
        <Router basename="/react">
            <Switch>
                {routerConfig.map(n => {
                    return <Route path={n.path} exact component={n.component}></Route>;
                })}
            </Switch>
        </Router>
    );
}

export default AppRouter;

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

Запустите локальную службу:

about

Нажмите, чтобы перейти с домашней страницы в это времяabout, вы можете увидеть путь этого режима маршрутизации;

На этом этапе, если вы обновите браузер, вам будет предложено, что он не может быть найденaboutсодержание:

在这里插入图片描述

В это время вы можетеwebpack.config.jsВнутрь добавить:

devServer {
	historyApiFallback: true
}

webpackвнутриhistoryApiFallbackиспользуетconnect-history-api-fallback:

Перезапустите локальную службу и снова обновите ее.

О подключении-истории-api-fallback

Одностраничные приложения (SPA) обычно имеют только один index.html, а переходы навигации основаны наHTML5 History API, когда пользователь получает прямой доступ к этому адресу за пределами страницы index.html или извлекает его с помощью кнопки обновления браузера, возникает ошибка 404;

например, прямой доступ/login, /login/online, на этот раз через index.html, чтобы найти файл по этому адресу. Так как это одностраничное приложение, конечным результатом должен быть сбой поиска с ошибкой 404.

Это промежуточное программное обеспечение используется для решения этой проблемы;

Пока выполняется одно из следующих четырех условий, промежуточное ПО изменит адрес запроса, чтобы он указывал на адрес по умолчанию.index.html:

1 GET请求

2 Допустимый формат контента:text/html

3 не является прямым запросом файла, например, путь не содержит.

4 нетoptions.rewritesрегулярные матчи в

2. конфигурация нгинкс

location /react {
    alias /project/react/;
    # browserHistory模式 404问题
    try_files $uri $uri/ /react/index.html;
    index index.html;
    autoindex on;
    gzip on;
    add_header Access-Control-Allow-Origin '*';
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, OPTIONS';
    add_header Access-Control-Expose-Headers 'Accept-Ranges, Content-Encoding, Content-Length, Content-Range';
  }

autoindex on Включите это, и ввод /react направит вас к index.html;

Основное решение try_files заключается в том, что если index.html не может быть найден в некоторых каталогах, в конечном итоге будет гарантированный путь к ресурсу /react/index.html;

try_files $uri $uri/ /react/index.html;

Ввод браузера http://**:6002/react/about

Сначала будет искать http://**:6002/react/about, есть ли файл about.html, затем искать/about/Есть ли файл под существующим, если нет, то запустить/react/index.html;

==try_files можно решить, добавив $uri/try_filesа такжеautoindexКогда оба существуют, введите/reactОн не направляется автоматически наindex.htmlпроблема ==;

Справочная документация

  1. connect-history-api-fallback

  2. nginx ~ try_files

Категории