Ребят, кто работал с react-router-dom v6? Не пойму как организовать

Question

Ребят, кто работал с react-router-dom v6? Не пойму как организовать

роуты. Вебпак мне собирает бандл в dist/users/index.html. Получается, что я открываю прилу по localhost/users. В корневом компоненте у меня код
<Routes>
<Route path="users" element={<Users />} />
<Route path="users/:id" element={<div>Test</div>} />
</Routes>
Есть список юзеров, в них есть линки
<Link to={user.id} >...</Link>

При нажатии на юзера норм редиректит, но как только обновить страницу - 404. ЧЯДНТ?

#frontend #javascript #programming #react.js #russian

0

27.05.2022

18 ответов

26 просмотров

Alex Kulakoff 🇨🇳 Автор вопроса

No Name
что у тебя в public/index.html ?

эмм, у меня нет такой папки

0

27.05.2022

No Name

Alex Kulakoff 🇨🇳
эмм, у меня нет такой папки

где ты объявляешь ссылку на bundle.js?

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

No Name
где ты объявляешь ссылку на bundle.js?

в HtmlWebpackPlugin <!DOCTYPE html><html><head><meta charset="utf-8"><title>${htmlWebpackPlugin.options.title}</title></head><body><div id='${rootId}'></div></body></html> на выходе получаю html, в котором - <script defer src="../users/index.js">

0

27.05.2022

Илья

Фолбек настроен локально/сервере?

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

Илья
Фолбек настроен локально/сервере?

пока только разработка, не настроен. Где его нужно настраивать?

0

27.05.2022

Илья

В вебпаке добавить devServer: { port: 3000, hot: true, historyApiFallback: true, },

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

Илья
В вебпаке добавить devServer: { port: 3000, ...

🙏

0

27.05.2022

Илья

Со стороны бека, по всем урлам надо отдавать твой index. Почитай об этом.

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

1. В деве у меня не сработал твой способ) 2. Где почитать? Просто в гугле? Или есть какой то гайд?

0

27.05.2022

Илья

Если не сработал, то значит, что-то ты делаешь не так https://stackoverflow.com/questions/43209666/react-router-v4-cannot-get-url

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

Илья
Если не сработал, то значит, что-то ты делаешь не ...

структуру роутов я правильно делаю в компоненте? Или как то по другому нужно делать?

0

27.05.2022

eden lane

Alex Kulakoff 🇨🇳
1. В деве у меня не сработал твой способ) 2. Где ...

Илья всё правильно говорит, nginx надо настроить так, чтобы по любому урлу отдавался index.html. Только надо учесть наличие css и js файлов

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

eden lane
Илья всё правильно говорит, nginx надо настроить т...

это я понял, просто у меня в деве его способ не сработал)))

0

27.05.2022

eden lane

Alex Kulakoff 🇨🇳
это я понял, просто у меня в деве его способ не ср...

у тебя на деве nginx?

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

eden lane
у тебя на деве nginx?

devServer: { static: { directory: "./dist", }, port: 3000, hot: true, historyApiFallback: true, },

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

Илья
В вебпаке добавить devServer: { port: 3000, ...

после некоторого изучения добавил - historyApiFallback: { index: "users/index.html", verbose: true, }, после запроса localhost://users/id есть запись в дев-сервере - Rewriting GET /users/269854915 to users/index.html но всё равно 404.

0

27.05.2022

Alex Kulakoff 🇨🇳 Автор вопроса

Илья
Со стороны бека, по всем урлам надо отдавать твой ...

кажется решил. Вот так - historyApiFallback: { rewrites: [ { from: /^\/users\/.*$/, to: "/users", }, ], verbose: true, },

0

27.05.2022

No Name · Accepted Answer

No Name

что у тебя в public/index.html ?

0

27.05.2022

169 похожих чатов

Ребят, кто работал с react-router-dom v6? Не пойму как организовать

18 ответов

Похожие вопросы