CODEWITHSUNDEEP
reactjswebreact-router
Sheen
Sheen

Reputation: 708

Confused as to how to approach design of React application

I am creating a React application (using material-ui) that fetches links to youtube videos from a database, creates thumbnails etc. I have the UI mostly configured, however im unsure what the best approach is for routing. I have a menu on the left hand side that shows different topics (this one is around martial arts, so each menu option is a different thing to do with it, 'punches', 'kicks' etc). I want each link when clicked to display the relevant videos to that topic, the links to which would be stored in a database and queried off of the keyword that's associated with it with the menu option. Here is where I get confused - given each page is going to show the same component(the video list), just with a different query, I feel like it doesn't make sense to create different pages for them (like you would with react router), rather it'd be better just to change the data on the current page.

I guess im looking for advice on whether my intuition is correct that I shouldn't use something like react router here, though I could?

Upvotes: 1

Views: 31

Answers (1)

Giorgi Moniava
Giorgi Moniava

Reputation: 28684

You can use router with params. I am copying and slightly modifying example from react router.

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  React.useEffect(()=>{
    // TODO: id changed, you can fetch data here
  },[id])

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

Upvotes: 1

Related Questions