Как реализовать навигацию с помощью React и NGINX?

avatar
Chiara Pellecchia
1 июля 2021 в 15:57
76
1
0

У меня есть веб-сайт на React.js, развернутый на экземпляре AWS EC2.

Для его развертывания я использую конвейерную систему Bitbucket.

В качестве сервера я использую NGINX.

Мой вопрос: чтобы использовать навигацию между экранами, должен ли я установить что-то в конфигурационном файле NGINX? Потому что, если я попытаюсь использовать «ссылку на», например, чтобы перейти на домашнюю страницу, мой URL-адрес станет http://IP.compute-1.amazonaws.com/register но в результате ошибка 404 не найдена

Изменить: Маршрутизатор:

<BrowserRouter> 
            <Switch>
             <Route path="/home" component={Home} exact/>
             <Route path="/profile" component={Profile}/>
             <Route path="/" component={Login}/>
             <Route path="/register" component={Register}/>
            <Route component={Error}/>

           </Switch>
      </BrowserRouter>

навигация:

<Link to="/register">
            <button className="loginRegisterButton">
              Create a New Account
            </button>
            </Link>

путь, который выдает "404 не найден nginx":

http://ec2-***-**-**-**.compute-1.amazonaws.com/home

Кроме того, я думаю, что на NGINX у меня нет всех файлов, которые мне нужны: в домашнем/ec2-пользователе: скриншот

Источник
double-beep
9 июля 2021 в 05:15
0

Я рад, что вы нашли решение своей проблемы. Однако фактический ответ/решение не должно не быть отредактировано в вашем вопросе. Как правило, вы должны отредактировать вопрос, чтобы уточнить его, но не включать в него ответ. Вы должны создать свой собственный ответ с кодом/решением, которое вы использовали для решения своей проблемы, а затем принять его (перед этим система может потребовать 48-часовой задержки). Когда вы решили проблему самостоятельно, рекомендуется ответить на свой вопрос.

Ответы (1)

avatar
Rao Virinchi
1 июля 2021 в 16:15
0

Вам не нужно ничего дополнительно настраивать для nginx, кроме правильной настройки нашего домена. Вы можете использовать пакеты react-router и react-router-dom из npm для удобной маршрутизации между несколькими страницами.

Chiara Pellecchia
1 июля 2021 в 16:55
0

он все еще добавляет /home в конце URL-адреса и поэтому не работает. Я следовал этому руководству codingame.com/playgrounds/6517/react-router-tutorial.

Rao Virinchi
1 июля 2021 в 17:40
0

Можете ли вы поделиться фрагментом кода вашего реактивного маршрутизатора? Пожалуйста, включите путь неправильного поведения.