Всем привет! Может кто-нибудь помочь с формированием путей в React Router?

Question

[tourist20]

Я делаю запрос на сервер, получаю JSON, и все файлы в нем. Но чтоб перейти на отдельную страницу каждого элемента нужно снова обращаться к целому файлу и искать в нем нужный id для роутинга. Таким способом роуты работают нормально, но когда пытаюсь перейти на несуществующую страницу, то роутер не срабатывает. Как решить эту проблему?

const [job, setJob] = useState({})

const {jobId} = useParams();

const [fetchJobs, isLoading, isError] = useFetch(async () => {
const jobs = await JobService.getAllJobs()
setJob(jobs.find(({id}) => id === jobId))
})

useEffect(() => {
fetchJobs()
}, [])

Comments

[szQocks]

<Route path='*' element={<NotFoundPage />} />

Самый последний роут, для страницы с ошибкой, когда переходишь по роуту которого не существует - будет перебрасывать на эту страницу

[tourist20]

szQocks,
Да, у меня так и прописано, но на страницу не переходит, а просто падает приложение. Скорей всего логику запроса и прохода по массиву надо разместить в файле App.js, но как это сделать ума не хватает.
Просто сам JSON не предусматривает перехода на отдельную страницу и я ее формирую из целого файла выдергивая нужный элемент по id

<BrowserRouter>
 <div className="App">
    <Routes>
     <Route path="/" element={<MainPage/>}/>
      <Route path="/:jobId" element={<SingleJobPage/>}/>
      <Route path="*" element={<ErrorPage/>} />
     </Routes>
    </div>
</BrowserRouter>

[szQocks]

tourist20, покажи app.js роуты

[szQocks]

tourist20, попробуй перейти по роуту

/hrthtrhr/4gergre - должна будет отработать страница с ошибкой

[tourist20]

szQocks, по любому роуту перехожу, кроме указанных, и приложение падает. просто белый экран

[tourist20]

проблема в том, что приложение воспринимает любой ввод в строку, как id элемента

[szQocks]

tourist20, да я понимаю, поэтому я и написал ещё один слэш и после него ещё символы, лучше наверное роут такой не делать /:jobsId , лучше навреное так /jobs/:jobsId

[szQocks]

tourist20,

<BrowserRouter>
                <Routes>
                    <Route path="/" element={<Layout />}>
                        <Route index element={<HomePage />} />
                        <Route path="catalog" element={<CatalogPage />} />
                        <Route path="bonuses" element={<BonusesPage />} />
                        <Route path="about" element={<AboutPage />} />
                        <Route path="profile" element={<ProfilePage />} />
                        <Route path="profile/email/*" element={<ProfileEmailConfirm />} />
                        <Route path="contacts" element={<ContactsPage />} />
                        <Route path="contacts/:id" element={<ContactPage />} />
                        <Route path="office" element={<OfficePage />} />
                        <Route path="login" element={<LoginPage />} />
                        <Route path="restore" element={<RestorePage />} />
                        <Route path="help" element={<HelpPage />} />
                        <Route path="*" element={<NotFoundPage />} />
                    </Route>
                </Routes>
            </BrowserRouter>

Что-то типа этого должно быть, так же в страницах могут быть вложенные роуты

[tourist20]

szQocks, спасибо большое! так работает