React Admin Dashboard

Hi, I am building the React Admin Dashboard, and the nested Routes are not working. The EditButton does not open a new route of http://localhost:5173/companies/edit/1 and http://localhost:5173/task shows an error of No routes matched location "/task" . Am I missing something?
3 Replies
kapa.ai
kapa.ai4mo ago
Hi @TerryL1971 | DA. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you might not have correctly set up your routes or resources in your src/App.tsx file. Here are a few things you can check: 1. Ensure that you have correctly imported your components and added them to your routes. For example, if you have a CompanyEdit component, you should have something like this in your src/App.tsx file:
import { CompanyEdit } from "./pages/companies";

// ...

<Route path="/companies/edit/:id" element={<CompanyEdit />} />
import { CompanyEdit } from "./pages/companies";

// ...

<Route path="/companies/edit/:id" element={<CompanyEdit />} />
(Source: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel#how-to-edit-a-record)) 2. Make sure that you have correctly set up your resources. For example, if you have a companies resource, you should have something like this in your src/App.tsx file:
resources={[
{
name: "companies",
list: "/companies",
create: "/companies/create",
edit: "/companies/edit/:id",
},
]}
resources={[
{
name: "companies",
list: "/companies",
create: "/companies/create",
edit: "/companies/edit/:id",
},
]}
(Source: React Admin Panel Tutorial with Chakra UI and Strapi (https://refine.dev/blog/react-admin-tutorial#modifyingediting-records)) 3. If you're using nested routes, make sure they are correctly set up. For example:
<Route path="admin">
<Route path="users">
<Route index element={<UserList />} />
<Route path="create" element={<UserCreate />} />
<Route path="edit/:id" element={<UserEdit />} />
</Route>
</Route>
<Route path="admin">
<Route path="users">
<Route index element={<UserList />} />
<Route path="create" element={<UserCreate />} />
<Route path="edit/:id" element={<UserEdit />} />
</Route>
</Route>
(Source: Discord support thread: How to use nested Route with antdInference (https://discord.com/channels/837692625737613362/1153646289553207347)) If you're still having issues, you might find it helpful to refer to the refine documentation (https://refine.dev/docs) or the React Router v6 documentation (https://refine.dev/docs/packages/documentation/routers/react-router-v6) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@1097504813140430878> kapa.ai is still learning and improving, please let us know how it did by reacting below
unwilling-turquoise
unwilling-turquoise4mo ago
I am following the video and everything matches the video and react-router-v6 docs. I still am received an error.