Different pages, same content, different data - React

Question

I am making an admin page for my website. I need to be able to display all my data from my database, with each table having its own page, however the pages will in functionality be the same, read data from the database, but they will be for a different table for each page, with different data and different structure. Sorry if that's hard to read, not sure what the best way to describe it is

Answer 1

You should implement a function that uses a corresponding table layout based on the window location.

Your directory structure could be as follows:

- components
- - tables
- - - index.tsx
- - - TableA.tsx
- - - TableB.tsx
- - - ...

You could in tables/index.tsx use a component along the lines as:

export default function Table() {
  const location = parseLocation()
  let Component
  if (location === 'x') {
    Component = TableA
  }
  else if (location === 'y') {
    Component = TableB
  }
  ...
  return <Component/>
}

Then you simply fetch the corresponding data in each Table.

Answer 2

In React universal measure of reusable code is a component. Your app consist of components and a component itself. Your logic usually tied to your components and different pages that you show is also a components.

You can write your page once and then, depending on URL load different data. Actual implementation will depend on your data management solution, your router and so on, but this is achievable. If we talk abstractly, it would be something like this: