React - доступ к дочерним путям напрямую с помощью BrowserRouter?
Я использую BrowserRouter в качестве React Router Dom, и пока я пытаюсь получить доступ к определенному пути, скажем, http://localhost:3000/recoverPassword, URL-адрес не может быть разрешен. Я не могу перейти на HashRouter, так как клиент не впечатлен, увидев # в URL-адресе. Я нашел причину и обнаружил, что это — это то, как мы можем исправить это с помощью веб-пакета. Но я не использую веб-пакет в своем проекте. Поэтому я хотел знать, есть ли альтернативный подход без использования сборщиков модулей?
import { BrowserRouter as Router, Route } from "react-router-dom";
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path = "/" component = {SignIn} />
<Route exact path = "/recoverPassword" component = {RecoverPassword} />
</div>
</Router>
);
}
}
Примечание:
Локально он работает без дополнительной настройки, но когда я развертываю его в Amazon AWS, он не может определить путь.
Обновление №1
Мы можем настроить ведро s3 для устранения ошибки, указав документ с ошибкой также на index.html, как это объясняет отвечать. Хеш-трюк create-react-app сделает все остальное с BrowserRouter.
But my team had hosted the build to production in EC2, I don't have the access to it currently, need to have a look at how the same can be configured out there. Meantime it would be great if someone can share any info as an answer regarding how to deal this in EC2.
Спасибо.
@BoyWithSilverWings Я не использую сборщики модулей. Я просто создаю сборку с помощью npm run build, а затем развертываю.
Это кажется странным. Тогда для чего вы используете build? Вы используете create-react-app?
Да, я создал скелет, используя создать-реагировать-приложение
Ну, тогда вы используете webpack внизу. create-react-app имеет собственные инструкции по развертыванию страница
Вам просто нужно убедиться, что вы отправляете ссылку index.html с AWS независимо от того, на каком маршруте вы находитесь.
@ShubhamKhatri Будучи новичком в веб-разработке, я не мог перестать понимать, что вы имели в виду, не могли бы вы, пожалуйста. более продуманный?
Допустим, имя вашего сервера — ReactApp.com, тогда для путей ReactApp.com/recoverPassword или ReactApp.com AWS должен просто вернуть файл index.html из вашей сборки.
@ShubhamKhatri Итак, мне нужна какая-либо конфигурация для этого, в проекте или на сервере aws?
Вам нужно иметь эту конфигурацию на сервере AWS
@ShubhamKhatri Хорошо, позвольте мне проверить. Между тем, если вы можете объяснить, как это сделать, в качестве ответа, это было бы здорово для таких новичков, как я. Спасибо.
@Stella Кажется, ваша проблема решена, но я бы порекомендовал пройти этот блог ... это поможет вам понять, что происходит и как с этим бороться.
@ShubhamKhatri Я размещаю сборку в корзине aws s3 для целей тестирования, поэтому я устранил ошибку 404, указав документ об ошибке также на index.html, как это объясняет отвечать. Хэш-трюк create-react-app сделает все остальное с BrowserRouter. Но моя команда разместила сборку для производства в EC2, у меня сейчас нет к ней доступа, нужно посмотреть, как то же самое можно настроить там.
Что вы используете для обслуживания файлов?