xenial-black•6mo ago

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•6mo 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•6mo ago

<@1097504813140430878> kapa.ai is still learning and improving, please let us know how it did by reacting below

xenial-black•6mo ago

I am following the video and everything matches the video and react-router-v6 docs. I still am received an error.