React Production Build показывает 404 обновления страницы - PullRequest
Новая
       18

React Production Build показывает 404 обновления страницы

1 голос
/ 18 июня 2019

У меня есть приложение ReactJS, которое очень хорошо работает в среде разработки.Я использую веб-пакет.Когда я запускаю сборку пряжи и помещаю свои файлы на свой сервер, все работает нормально.но если я нажму кнопку обновления в браузере, я получу 404.

Мой сервер использует Apache.Я попытался htaccess, я сделал историю FallBackApi.Кажется, никто из них не решил мою проблему

Вот мой .htaccess 

RewriteBase /
RewriteCond %{REQUEST_URI} !^/(assets/?|$)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Вот мой webpack.config.js 

const HtmlWebpackPlugin = require('html-webpack-plugin');

const modeConfig = env => require(`./config/webpack.${env}`)(env);
const webpackMerge = require('webpack-merge');
const path = require('path');


module.exports = (
    { mode } = { mode: 'development', presets: [] },
) =>
// console.log(`mode: ${mode}`);
    webpackMerge(
        {
            mode,
            entry: './src/index.js',
            resolve: {
                extensions: ['.js', '.jsx', '.css', 'scss'],
            },
            devServer: {
                historyApiFallback: { index: '/' },
                contentBase: './',
                open: true,
                port: 4100,
            },
            module: {
                rules: [
                    {
                        test: /\.(png|jpg|jpeg|gif|ico)$/,
                        exclude: /node_modules/,
                        loader: 'url-loader?limit=8192',
                    },
                    {
                        test: /\.(js|jsx|mjs)$/,
                        exclude: /node_modules/,
                        use: 'babel-loader',
                    },
                    {
                        test: /\.(woff|woff2|eot|ttf)$/,
                        loader: 'url-loader?limit=100000',
                    },
                    {
                        test: /\.svg$/,
                        loader: 'svg-inline-loader?classPrefix',
                    },
                ],
            },

            output: {
                publicPath: '/',
                path: path.resolve(__dirname, 'build'),
                filename: 'bundle.js',
            },
            plugins: [
                new HtmlWebpackPlugin({
                    template: './public/index.html',
                }),

                // new FaviconsWebpackPlugin({ logo: "./public/image.png" })
            ],
        },
        modeConfig(mode),
    );

Вот мой маршрут 



function App() {
    return (
        <Router history={history}>
            <Switch>
                <Route exact path="/" component={LoginComponent} />
                <Route path="/reset-password" component={ResetPassword} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/cards" component={CardsList} />
                <Route path="/view-card" component={ViewCard} />
                <Route path="/transactions" component={Transfer} />
                <Route path="/users" component={UsersList} />
                <Route path="/edit-user" component={EditUser} />
            </Switch>
        </Router>
    );
}

export default App;

Вот моя пользовательская история 

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

Я продолжаю получать 404 при обновлении страницы на сервере.

1 Ответ

0 голосов
/ 09 июля 2019

Я бы обновил ваш .htaccess файл, чтобы он был таким.Вероятно, проблема в том, что то, что вы сейчас используете в качестве файла .htaccess, не перенаправляет ошибки 404 на index.html: 

RewriteEngine On  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]

Я бы также добавил пользовательскую страницу 404.Для этого вам нужно создать новый компонент и добавить еще один маршрут к вашему коммутатору.Маршрут не должен иметь пути и должен быть последним маршрутом коммутатора.

<Route component={NotFoundComponent} />

...