URL-адреса React-router не работают при обновлении или записи вручную

Если вы размещаете приложение React через AWS Static S3 Hosting и CloudFront

Эта проблема возникла из-за того, что CloudFront ответил сообщением 403 Access Denied, потому что ожидалось, что / some / other / path будет существовать в моей папке S3, но этот путь существует только внутри маршрутизации React с помощью response-router.

Решением было установить правило распределения страниц ошибок. Зайдите в настройки CloudFront и выберите свою раздачу. Затем перейдите на вкладку «Страницы ошибок». Нажмите «Создать настраиваемый ответ на ошибку» и добавьте запись для 403, поскольку это код состояния ошибки, который мы получаем. Установите Путь к странице ответа на /index.html, а код состояния на 200. Конечный результат меня поражает своей простотой. Страница индекса обслуживается, но URL-адрес сохраняется в браузере, поэтому после загрузки реагирующего приложения оно определяет путь URL-адреса и переходит к желаемому маршруту.

Правило страницы ошибок 403

Это может решить вашу проблему

Я также столкнулся с той же проблемой в приложении ReactJS в производственном режиме. Вот 2 решения проблемы.

1. Измените историю маршрутизации на hashHistory вместо browserHistory вместо

<Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
</Router>

Теперь создайте приложение с помощью команды

sudo npm run build

Затем поместите папку сборки в папку var / www /. Теперь приложение работает нормально с добавлением тега # в каждый URL. нравиться

локальный / # / домашний локальный / # / aboutus

Решение 2. Без тега # с использованием browserHistory,

Установите в маршрутизаторе свой history = {browserHistory}. Теперь создайте его с помощью sudo npm run build.

Вам нужно создать файл conf, чтобы решить страницу 404 not found, файл conf должен быть таким.

откройте свой терминал, введите следующие команды

cd / etc / apache2 / sites-available ls nano sample.conf Добавьте в него приведенное ниже содержимое.

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

Теперь вам нужно включить файл sample.conf с помощью следующей команды

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

затем он попросит вас перезагрузить сервер apache, используя sudo service apache2 reload или перезапустить

затем откройте папку localhost / build и добавьте файл .htaccess с приведенным ниже содержимым.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Теперь приложение работает нормально.

Примечание: измените IP-адрес 0.0.0.0 на свой локальный IP-адрес.

Если есть сомнения по этому поводу, не стесняйтесь поднять комментарий.

Я надеюсь, что это поможет другим.

Если вы размещаете свое приложение для реагирования на IIS, просто добавьте файл web.config, содержащий:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Это укажет серверу IIS вернуть клиенту главную страницу вместо ошибки 404 и не использовать историю хеширования.

У Webpack Dev Server есть возможность включить это. Откройте package.json и добавьте --history-api-fallback. Эти решения сработали для меня.

response-router- руководство

Рабочий стек: React, React Router v4, BrowswerRouter, Express, Nginx

1) User BrowserRouter для красивых URL

// app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           // your routes here
        </Router>
    )
  }
}

2) Добавьте index.html ко всем неизвестным запросам с помощью /*

// server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3) связать веб-пакет с webpack -p

4) запустите nodemon server.js или node server.js

РЕДАКТИРОВАТЬ: вы можете позволить nginx обрабатывать это в блоке сервера и игнорировать шаг 2:

location / {
    try_files $uri /index.html;
}

Добавьте это в webpack.config.js:

devServer: {
    historyApiFallback: true
}

Попробуйте добавить файл «.htaccess» в общую папку с помощью приведенного ниже кода.

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

RewriteRule ^ /index.html [L]  

Если у вас есть резервный вариант для вашего index.html, убедитесь, что в вашем файле index.html есть следующее:

<script>
  System.config({ baseURL: '/' });
</script>

Это может отличаться от проекта к проекту.

Если вы используете firebase, все, что вам нужно сделать, это убедиться, что у вас есть свойство rewrites в вашем файле firebase.json в корне вашего приложения (в разделе хостинга).

Например:

{ 
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]    
  }
}

Надеюсь, это избавит кого-то еще от кучи разочарований и зря потраченного времени.

Удачного кодирования ...

Дополнительная литература по теме:

https://firebase.google.com/docs/hosting/full-config#rewrites

Firebase CLI: настроить как одностраничное приложение (перепишите все URL-адреса в /index.html)

Для тех, кто использует IIS 10, вы должны сделать это правильно. Убедитесь, что вы используете с этим browserHistory. Что касается справки, я дам код для маршрутизации, но не это имеет значение, важен следующий шаг после кода компонента ниже:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />    
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

Поскольку проблема в том, что IIS получает запрос от клиентских браузеров, он интерпретирует URL-адрес, как если бы он запрашивал страницу, а затем возвращает страницу 404, поскольку доступной страницы нет. Сделайте следующее:

1. Откройте IIS
2. Разверните Сервер, затем откройте папку Сайтов.
3. Щелкните веб-сайт / приложение
4. Перейти на страницы ошибок
5. Откройте в списке пункт состояния ошибки 404
6. Вместо параметра «Вставить содержимое из статического файла в ответ об ошибке» измените его на «Выполнить URL-адрес на этом сайте» и добавьте к URL-адресу значение косой черты «/».

И теперь будет нормально работать.

Я надеюсь, что это помогает. :-)

Я нашел решение для своего SPA с реагирующим маршрутизатором (Apache). Просто добавьте .htaccess

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

источник: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa71360

Я еще не использую рендеринг на стороне сервера, но я столкнулся с той же проблемой, что и OP, где Link, казалось, работал нормально большую часть времени, но не работал, когда у меня был параметр. Я задокументирую свое решение здесь, чтобы посмотреть, поможет ли оно кому-нибудь.

Мой основной jsx содержит это:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

Это отлично работает для первой совпадающей ссылки, но когда: id изменяется в <Link> выражениях, вложенных на страницу сведений о модели, URL-адрес изменяется в строке браузера, но содержимое страницы изначально не изменилось, чтобы отразить связанную модель.

Проблема заключалась в том, что я использовал props.params.id, чтобы установить модель в componentDidMount. Компонент монтируется только один раз, поэтому это означает, что первая модель - это та, которая остается на странице, а последующие ссылки изменяют свойства, но оставляют страницу без изменений.

Установка модели в состояние компонента как в componentDidMount, так и в componentWillReceiveProps (где она основана на следующих свойствах) решает проблему, и содержимое страницы изменяется, чтобы отразить желаемую модель.

Эта тема немного устарела и решена, но я хотел бы предложить вам простое, понятное и лучшее решение. Это работает, если вы используете веб-сервер.

Каждый веб-сервер имеет возможность перенаправить пользователя на страницу с ошибкой в ​​случае http 404. Чтобы решить эту проблему, вам необходимо перенаправить пользователя на страницу индекса.

Если вы используете базовый сервер Java (tomcat или любой сервер приложений Java), решение может быть следующим:

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

Пример:

• ПОЛУЧИТЬ http://example.com/about
• Веб-сервер выдает http 404, потому что эта страница не существует на стороне сервера
• конфигурация страницы ошибки сообщает серверу, который отправляет страницу index.jsp обратно пользователю
• тогда JS выполнит остальную работу на стороне клиента, поскольку URL-адрес на стороне клиента по-прежнему http://example.com/about.

Вот и все, магии больше не нужно :)

Если вы используете Express или какой-либо другой фреймворк в бэкэнде, вы можете добавить аналогичную конфигурацию, как показано ниже, и проверить общедоступный путь Webpack в конфигурации, он должен работать нормально даже при перезагрузке, если вы используете BrowserRouter.

expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
});

Исправление ошибки «не удается получить / URL» при обновлении или при прямом вызове URL.

Настройте свой webpack.config.js так, чтобы данная ссылка имела такие маршруты.

module.exports = {
  entry: './app/index.js',
  output: {
       path: path.join(__dirname, '/bundle'),
       filename: 'index_bundle.js',
       publicPath: '/'
  },

Вы можете попробовать все это прочитать, хотя это не мое:

https://www.andreasreiterer.at/fix-browserrouter-on-apache/ < / а>

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Если вы развертываете свое приложение в подкаталоге, чтобы оно было доступно, например через https://myapp.com/the-app, вы скоро заметите, что есть еще один проблема. Каждый щелчок по новому маршруту преобразует URL-адрес во что-то вроде https://myapp.com/route-abc - который снова сломается после перезагрузки. Но для этого есть простое решение:

BrowserRouter имеет свойство basename, в котором вы можете указать путь к подкаталогу:

From now on, each Route like /contacts will result in an URL like http://myapp.com/the-app/contacts.

Использование HashRouter также работало для меня с Redux, просто замените:

import {
  Router //replace Router
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
    <Provider store={Store}>
        <Router history={history}> //replace here saying Router
            <Layout/>
        </Router>
    </Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();

to:

import {
  HashRouter //replaced with HashRouter
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
    <Provider store={Store}>
        <HashRouter history={history}> //replaced with HashRouter
            <Layout/>
        </HashRouter>
    </Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();

Если вы используете команду create-response-app,

чтобы сгенерировать приложение для реагирования, в package.json должно быть одно изменение для правильной работы производственной сборки React SPA в браузере. Откройте package.json и добавьте к нему следующий сегмент кода,

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

Здесь самая важная часть - это --history-api-fallback, чтобы включить обратный вызов API истории.

Иногда вы получаете ошибку 404, если используете Spring или любой другой серверный API. Таким образом, в такой ситуации вам необходимо иметь контроллер в серверной части для пересылки любого запроса (по вашему желанию) в файл index.html для обработки с помощью response-router. Ниже показан пример контроллера, написанного с использованием spring.

@Controller
public class ForwardingController {
    @RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
    public String forward(HttpServletRequest httpServletRequest) {
        return "forward:/";
    }
}

например, если мы возьмем конечную точку REST внутреннего API как abc (http: // localhost: 8080 / abc / **), любой запрос, поступающий в эту конечную точку, будет перенаправлен на реагирующее приложение (файл index.html) и реагировать- router обработает это послесловие.

В случае, если кто-то здесь ищет решение по React JS SPA с Laravel. Принятый ответ - лучшее объяснение того, почему возникают такие проблемы. Как уже объяснялось, вам необходимо настроить как клиентскую, так и серверную стороны. В свой шаблон лезвия включите связанный файл js, обязательно используйте URL facade, как это

<script src="{{ URL::to('js/user/spa.js') }}"></script>

В своих маршрутах обязательно добавьте это в основную конечную точку, где находится шаблон лезвия. Например,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

Вышеупомянутое является основной конечной точкой для шаблона лезвия. Теперь добавьте необязательный маршрут,

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

Возникающая проблема заключается в том, что сначала загружается шаблон блейд-сервера, а затем - реагирующий маршрутизатор. Итак, когда вы загружаете '/setting-alerts', он загружает HTML и js. Но когда вы загружаете '/setting-alerts/about', он сначала загружается на стороне сервера. Поскольку на стороне сервера в этом месте ничего нет, возвращается значение «Не найдено». Когда у вас есть этот дополнительный маршрутизатор, он загружает ту же страницу, и также загружается реагирующий маршрутизатор, а затем загрузчик реагирования решает, какой компонент отображать. Надеюсь это поможет.

Поскольку я использую .Net Core MVC, мне помогло что-то вроде этого:

    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var url = Request.Path + Request.QueryString;
            return App(url);
        }

        [Route("App")]
        public IActionResult App(string url)
        {
            return View("/wwwroot/app/build/index.html");
        }
   }

В основном на стороне MVC все несоответствующие маршруты попадут в Home/Index, как указано в startup.cs. Внутри Index можно получить исходный URL-адрес запроса и передать его там, где это необходимо.

startup.cs

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });

Если вы размещаете в IIS; Добавление этого в мой webconfig решило мою проблему

<httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
    <remove statusCode="500" subStatusCode="100" />
    <remove statusCode="500" subStatusCode="-1" />
    <remove statusCode="404" subStatusCode="-1" />
    <error statusCode="404" path="/" responseMode="ExecuteURL" />
    <error statusCode="500" prefixLanguageFilePath="" path="/error_500.asp" responseMode="ExecuteURL" />
    <error statusCode="500" subStatusCode="100" path="/error_500.asp" responseMode="ExecuteURL" />
</httpErrors>

Вы можете сделать аналогичную конфигурацию для любого другого сервера.

Для тех из вас, кто находится здесь, потому что вы пытаетесь обслуживать приложение для реагирования из виртуального каталога IIS (а не из корня веб-сайта), это может быть для вас.

При настройке ваших перенаправлений '/' не будет работать сам по себе, мне также нужно было указать имя виртуального каталога. Вот как выглядела моя веб-конфигурация:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <remove value="default.aspx" />
                <remove value="iisstart.htm" />
                <remove value="index.htm" />
                <remove value="Default.asp" />
                <remove value="Default.htm" />
            </files>
        </defaultDocument>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/YOURVIRTUALDIRECTORYNAME/" />
                </rule>
            </rules>
        </rewrite>
        <directoryBrowse enabled="false" />
        <httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
            <remove statusCode="500" subStatusCode="100" />
            <remove statusCode="500" subStatusCode="-1" />
            <remove statusCode="404" subStatusCode="-1" />
            <remove statusCode="403" subStatusCode="18" />
            <error statusCode="403" subStatusCode="18" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="404" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="500" prefixLanguageFilePath="" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="500" subStatusCode="100" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

В дополнение к файлу web.config самому реагирующему приложению потребуются некоторые изменения:

в package.json вам нужно добавить запись «домашняя страница»:

{
  "name": "sicon.react.crm",
  "version": "0.1.0",
  "private": true,
  "homepage": "/YOURVIRTUALDIRECTORYNAME/",
  "dependencies": {
...

Я добавил базовое имя к объекту истории моего браузера, которое я передаю маршрутизатору, чтобы получить доступ к истории:

import  {createBrowserHistory } from 'history';

export default createBrowserHistory({
    //Pass the public URL as the base name for the router basename: process.env.PUBLIC_URL
});

Я также добавил это свойство на моем маршрутизаторе React в App.js:

  <Router history={history} basename={process.env.PUBLIC_URL}>

Наконец, в index.html я добавил следующую вкладку над тегом title.

  <base href="%PUBLIC_URL%/">

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

Действительно потрясающие ответы уже !! Но если вы размещаете с помощью nginx и нуждаетесь в быстром исправлении ... добавьте следующую строку в конфигурацию nginx внутри блока местоположения

location / {
  try_files $uri /index.html;
}

Добавление дополнительной информации к ответу Джошуа Дейка.

Если вы используете Firebase и хотите использовать как корневой маршрут, так и маршрут подкаталога, вам необходимо добавить следующий код в свой firebase.json:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/subdirectory/**",
        "destination": "/subdirectory/index.html"
      }
    ]
  }
}

Пример:

Вы создаете сайт для клиента. Вы хотите, чтобы владелец веб-сайта добавил информацию в https://your.domain.com/management. в то время как пользователи веб-сайта будут переходить на https://your.domain.com.

В этом случае ваш firebase.json файл будет выглядеть так:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/management/**",
        "destination": "/management/index.html"
      }
    ]
  }
}

Я использую WebPack, у меня была такая же проблема Решение => В вашем файле server.js

const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, '../dist')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    // res.end();
  });

Почему не Не отображается ли мое приложение после обновления?

Мы использовали экспресс-подход к обработке ошибки 404

// path to the static react build directory    
const frontend = path.join(__dirname, 'react-app/build');

// map the requests to the static react build directory
app.use('/', express.static(frontend));

// all the unknown requests are redirected to the react SPA
app.use(function (req, res, next) {
    res.sendFile(path.join(frontend, 'index.html'));
});

Работает как шарм. Живая демонстрация - на нашем сайте

Я решил эту проблему, изменив webpack.config.js.

моя новая конфигурация выглядит так:

До:

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js'
},


devServer: {
  port: 3000
}

После:

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js',
  publicPath: '/'
},


devServer: {
  historyApiFallback: true,
  port: 3000
}

Если вы запускаете его в Google Bucket, простое решение - рассмотреть index.html для страницы с ошибкой (404 не найден).

To do so:

1. В списке сегментов найдите созданный сегмент.
2. Щелкните меню переполнения сегмента (...), связанное с сегментом, и выберите Изменить конфигурацию веб-сайта.
3. В диалоговом окне конфигурации веб-сайта также укажите главную страницу в качестве страницы с ошибкой.

Используя экспресс на бэкэнде и React на фронтенде (без response-create-app) с охватом / маршрутизатором, отображается правильный компонент реагирования на маршрут охвата / маршрутизатора, а при нажатии ввода в адресной строке для ссылки меню устанавливается активный стиль. например http: // localhost: 8050 / pages. Пожалуйста, проверьте ниже или прямо в моем репозитории https://github.com/nickjohngray/staticbackeditor, все код есть.

Веб-пакет:

Настроить прокси. Это позволяет любым вызовам из порта 3000 (React) вызывать сервер, включая вызов для получения index.html или чего-либо еще в адресной строке при нажатии клавиши ввода. он также позволяет обращаться к маршруту API, чтобы получить данные JSON

например, await axios.post ('/ api / login', {email, pwd})

devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/': 'http://localhost:8050',
    }
  }

Настройка экспресс-маршрутов

app.get('*', (req, res) => {
    console.log('sending index.html')
    res.sendFile(path.resolve('dist', 'index.html'))

});

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

Реагировать на маршруты

<Router>
    <Home path="/" />
    <Pages path="pages"/>
    <ErrorPage path="error"/>
    <Products path="products"/>
    <NotFound default />
</Router>

Эти маршруты определены в моем компоненте Layout, который загрузит соответствующий компонент при совпадении пути.

Конструктор макета React

 constructor(props) {
        super(props);


        this.props.changeURL({URL: globalHistory.location.pathname});
}

конструктор макета вызывается, как только он загружается. Здесь я вызываю свое действие changeURL, которое прослушивает мое меню, чтобы оно могло выделить правильный пункт меню, как показано ниже:

Код меню

<nav>
    {this.state.links.map( (link) =>
    <Link className={this.getActiveLinkClassName(link.path) } to={link.path}> 
      {link.name}
    </Link>)}            
</nav>

В моем случае URL-адрес не загружался, когда я использовал в нем параметр.

В качестве быстрого исправления я добавляю <base href="<yourdomain/IP>"></base> под тегом файла index.html в папку сборки.

И это решило мою проблему.

У меня была такая же проблема, и это решение сработало у нас ..

Фон:

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

Мы используем:

package.json

"dependencies": {
"babel-polyfill": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-persist": "^4.6.0",
"redux-thunk": "^2.2.0",
"webpack": "^2.4.1"
}

мой webpack.config.js

webpack.config.js

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelPolyfill = require('babel-polyfill');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/views/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    'babel-polyfill', './app/index.js'
  ],
  output: {
    path: __dirname + '/dist/your_app_name_here',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query : {
          presets : ["env", "react", "stage-1"]
      },
      exclude: /node_modules/
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
}

мой index.js

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from './Routes'
import { Provider } from 'react-redux'
import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import configureStore from './store/configureStore'
import { syncHistoryWithStore } from 'react-router-redux'
import { persistStore } from 'redux-persist'

const store = configureStore();

const browserHistory = useRouterHistory(createHistory) ({
  basename: '/your_app_name_here'
})
const history = syncHistoryWithStore(browserHistory, store)

persistStore(store, {blacklist: ['routing']}, () => {
  console.log('rehydration complete')
})
// persistStore(store).purge()


ReactDOM.render(
    <Provider store={store}>
      <div>
        <Routes history={history} />
      </div>
    </Provider>,
  document.getElementById('mount')
)

мой app.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));
// app.use(express.static(__dirname + '/app/assets'));
app.set('views', __dirname + '/dist/your_app_name_here');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

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

app.listen(8081, function () {
  console.log('MD listening on port 8081!');
});

Мне нравится такой способ справиться с этим. Попробуйте добавить: yourSPAPageRoute / * на стороне сервера, чтобы избавиться от этой проблемы.

Я выбрал этот подход, потому что даже собственный HTML5 History API не поддерживает правильное перенаправление при обновлении страницы (насколько мне известно).

Примечание: выбранный ответ уже касался этого, но я стараюсь быть более конкретным.

Экспресс-маршрут

Протестировал и просто хотел поделиться этим.

Надеюсь, это поможет.

Предположим, у вас есть следующее определение домашнего маршрута

<Route exact path="/" render={routeProps => (
   <Home routeProps={routeProps}/>
)}/>

{/*optional catch-all router */}
<Route render={routeProps => (
       <div><h4>404 not found</h4></div>
)}/>

В вашем домашнем компоненте вы можете перехватить запрос в событии ComponentWillMount,

const searchPath = this.props.routeProps.location.search;

if (searchPath){
    this.props.routeProps.history.push("/" + searchPath.replace("?",""));
}
else{
    /*.... originally Home event */
}

Теперь вместо вызова / joblist по URL-адресу вы можете запросить /? Joblist, и компонент автоматически перенаправит запрос на / joblist (обратите внимание на дополнительный вопросительный знак в пути)

Если вы приходите сюда и используете apache и у вас нет файла .htaccess, у меня сработал этот файл конфигурации:

sites-enabled/somedomain.com.conf

<VirtualHost *:80>
    ServerName somedomain.com
    ServerAlias *.somedomain.com
    DocumentRoot /www/somedomain.com/build

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /www/somedomain.com/build/index.html [L,NC,QSA]

</VirtualHost>

Решение для Preact с preact-router

Работает с обновлением и прямым доступом

Для тех, кто узнал об этом через Google, вот демонстрация preact-router + история хеширования:

const { h, Component, render } = preact; /** @jsx h */
const { Router } = preactRouter;
const { createHashHistory } = History;
const App = () => (
    <div>
        <AddressBar />

        <Router history={createHashHistory()}>
            <div path="/">
                <p>
                    all paths in preact-router are still /normal/urls.
                    using hash history rewrites them to /#/hash/urls
                </p>
                Example: <a href="/page2">page 2</a>
            </div>
            <div path="/page2">
                <p>Page Two</p>
                <a href="/">back to home</a><br/>
            </div>
        </Router>
    </div>
);

jsfiddle

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

Допустим, ваш сайт - mysite.com и у вас есть React Route на mysite.com/about. В index.js, где вы монтируете свой компонент верхнего уровня, вы можете поместить другой маршрутизатор, например:

ReactDOM.render(
<Router>
    <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/about"
            render={(props) => <Home {...props} refreshRout={"/about"}/>}
        />
    </div>
</Router>,

Я предполагаю, что у вас есть исходный маршрутизатор, расположенный где-то под компонентом верхнего уровня в виртуальной DOM. Вам также нужно поймать URL-адрес в ваших .urls, если вы используете Django, например:

urlpatterns = [
       path('about/', views.index),
]

Однако это будет зависеть от того, какой бэкэнд вы используете. Запрос mysite / about приведет вас к index.js (где вы монтируете компонент верхнего уровня), где вы можете использовать опору рендеринга Route, а не опору компонента, и передать '/ about' как опору в, в в этом примере компонент Home.

Внутри Home, в ловушке componentDidMount () или useEffect () выполните:

useEffect() {   
   //check that this.props.refreshRoute actually exists before executing the 
   //following line    
   this.props.history.replace(this.props.refreshRoute);
}

Я предположил, что ваш домашний компонент отображает что-то вроде:

<Router>
   <Route exact path="/" component={SomeComponent} />
   <Route path="/about" component={AboutComponent} />
</Router>

Кредит для (передать свойства компоненту, отображаемому с помощью React Router) о том, как передавать реквизиты компонентам в маршрутах.

Я использую .Net Core 3.1 и только что добавил расширение MapFallbackToController:

Startup.cs

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapFallbackToController("Index", "Home");
    });

Другой способ запросить данные, даже если вы немедленно направляете URL-адреса, - это сделать так, чтобы каждый компонент имел метод, который вызывает эти последние параметры, такие как / about / test, а затем вашему государственному провайдеру, у вас есть функция который подключается к компоненту, с которым вы хотите запросить данные

Я использую режим React.js + Webpack. Я добавил параметр --history-api-fallback в файл package.json. Тогда обновление страницы работает правильно. Каждый раз, когда я меняю код, веб-страница обновляется автоматически.

"scripts": {
  "start": "rimraf build && cross-env NODE_ENV='development' webpack --mode development && cross-env NODE_ENV=development webpack-dev-server --history-api-fallback",
  ...
}

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

Для меня решение довольно простое.

скажем, у вас есть URL-адрес, указывающий на какой-то порт.

location / {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
  port_in_redirect    off;
}

и теперь из-за браузера маршрутизатора суб-пути сломаны. Однако вы знаете, что такое подпути.

Решение этого? Для дополнительного пути /contact

# just copy paste.
location /contact/ {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
}

Ничего другого, что я пробовал, не работает, но это простое исправление работает чертовски очаровательно.

Я столкнулся с этой проблемой в Electron, когда использовал React для интерфейса и react-router-dom для маршрутизации. Я заменил BrowserRouter на HashRouter, и это было исправлено. Вот простой пример

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

HashRouter будет простой реализацией,

import {HashRouter as Router,Switch,Route,Link} from 'react-router-dom';


  function App() {
  return (
    <Router>
        <Switch>
          <Route path="/" exact component={InitialComponent} />
          <Route path="/some" exact component={SomeOtherComponent} />
        </Switch>
      </Router>
  );
}

В браузере это будет примерно так - http: localhost: 3000 / # /, http: localhost: 3000 / # / some

Это довольно просто, когда вы не можете получить ошибку 403 после обновления компонента dom. просто добавьте эту строку в конфигурацию вашего веб-пакета, 'historyApiFallback: true'. это savez весь мой день.

Полный маршрутизатор с примером (React Router v4):

Пример работы Пример Ознакомьтесь с проектом ниже.

response-router-4-example

После загрузки
1.) "npm install" в cmd для установки проекта
2.) "npm start" для запуска вашего реагирующего приложения.

Примечание. Для работы в Windows вам потребуется программное обеспечение Node js. В Mac OS установлен узел по умолчанию.

Ваше здоровье