Обновить страницу получает 404 ошибку с помощью React Router - PullRequest
0 голосов
/ 11 мая 2018

у меня есть ...

Back-End

Node.js / экспресс-сервер, который обслуживает файлы при отправке запросов на определенные маршруты.

Front-End

Реагирует на страницы, которые выполняют запросы к серверу, запрашивая данные для заполнения страниц.

Я использую реагирующий маршрутизатор v4 на внешнем интерфейсе. Всякий раз, когда я перехожу к маршруту, который НЕ находится на точном пути и перезагружает страницу, я получаю ошибку 404. Я понимаю, почему это не работает; браузер отправляет запрос на путь, который обрабатывается реагирующим маршрутизатором, и, поскольку он не находит этот маршрут на сервере, я получаю 404.

Я ищу решение этой проблемы.

// BrowserRouter imported as Router
<Router>
   <Route exact path='/main' component={Main} />
   <Route path='/sub1' component={SubOne} />
   <Route path='/sub2' component={SubTwo} />
</Router>

Когда я захожу на /main в браузере, <Main /> отображается. Скажите, что внутри <Main /> есть ссылки на /sub1 и /sub2 соответственно. Я нажимаю на /sub2. Компонент и содержимое страницы отображается без сбоев. Затем я обновляю страницу, случайно или намеренно (скажем, компонент Sub2 поднимает состояние до уровня Main).

Как мне избежать получения 404 после этого обновления? Как получить страницу / компонент, на котором после обновления отображается «Я был», если я использую React-Router?

Ответы [ 4 ]

0 голосов
/ 29 июня 2018

мое решение использует модуль content-history-api-fallback

сначала: история импорта из 'connect-history-api-fallback'

затем:

app.use(history({
    rewrites:[
        {from: /^\/api\/.*$/, to: function(context){
            return context.parsedUrl.pathname;
        }},
        {from: /\/.*/, to: '/'}
    ]
}))

app.get('/', function(req, res, next){
    res.render('index');
})

app.use('/api', api);
0 голосов
/ 11 мая 2018

У меня была та же проблема, что и у вас около 2 месяцев назад.У меня было очень мало знаний о рендеринге на стороне сервера с помощью React.Я запутался в общей концепции этого.Тем не менее, я не хотел использовать Cli-Act-App-Cli.Я хотел использовать свой собственный шаблон.Проведя исследование, я обнаружил, что мне пришлось сконфигурировать мой веб-пакет для обработки моих резервных перезагрузок 404.

Вот моя текущая настройка веб-пакета:

Обратите внимание, обратите внимание только на historyApiFallback: true это позволяет вам обновить страницу, не выдавая ошибку 404, если вы используете v4.Кроме того, я забыл упомянуть, что для этого требуется webpack-dev-server.

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require('html-webpack-plugin');

var browserConfig = {
    devServer: {
        historyApiFallback: true,
        proxy: {
            "/api": "http://localhost:3012"
        }
    },
    entry: ['babel-polyfill', __dirname + '/src/index.js'],
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
        })
    ]
}

var serverConfig = {
    target: 'node',
    externals: [nodeExternals()],
    entry: __dirname + '/server/main.js',
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'server.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    }
}

module.exports = [browserConfig, serverConfig]
0 голосов
/ 11 мая 2018

Причина, по которой вы получили 404, заключается в том, что обновление страницы приводит к тому, что по сети происходит попадание на сервер , тогда как реагирующий маршрутизатор является клиентской библиотекой маршрутизации, которая не обрабатывает сервермаршрутизация на стороне.

, когда пользователь нажимает кнопку обновления или получает прямой доступ к странице, отличной от целевой страницы, например, / help или / help / online, поскольку веб-сервер обходит файл индекса для поискафайл в этом месте.Поскольку ваше приложение является SPA, веб-сервер не сможет получить файл и вернуть пользователю сообщение 404 - Не найдено.

Поскольку вы используете сервер Express, connect-history-api-fallback (промежуточное программное обеспечение Express) может использоваться для проксирования всех полученных запросов (включая неизвестные, / sub2 в вашем случае) через вашу страницу индекса.Затем перезагрузите ваш SPA и направьте к / sub2 на клиенте по реагирующему маршрутизатору.

Если вы используете webpack-dev-server для локальной разработки, это будет так же просто, как включить devServer.historyApiFallback.

0 голосов
/ 11 мая 2018

Используйте директиву «Перенаправить», чтобы сопоставить ваши суб-пути с реальными путями

https://reacttraining.com/react-router/web/example/no-match

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...