Making dynamic pages in react-CodePudding

Let's say you have the following component "template1" which is a template for all the ids you want. But also let's assume there are several other of these templates as well as "home", "about us" etc. So let's say you have so many ids that it isn't feasible to make individual pages for them. How would you go about doing this in a scalable way? The way I am seeing it in my minds eye would be something like /template1/5Exo4a /template2/5Exo4a for the same id accross multiple templates or /template1/5Exo4a /template1/5A3z4a for same template but different ids.

I am using vite react typescript and currently have my app.tsx set up like so. Where SidePanel selects the individual ids etc. So would I need to step up that functionality to the app.tsx? Or am I able to just pass the ids back somehow?

function App() {
  return (
    <Router>
      <div className="App">
        <SidePanel/>
        
        <Routes>          
          <Route path="/" element={<Home />}/>
          <Route path="/template1" element={<template1/>}/>
          <Route path="/template2" element={<template2/>}/>
          <Route path="/template3" element={<template3/>}/>
          <Route path="/template4" element={<template4/>}/>
          <Route path="/template5" element={<template5/>}/>

        </Routes>
        <SecondaryPanel/>
      </div>
    </Router>
  )
}

CodePudding user response：

You can do something like this (taken from the tutorial link at the bottom):

export default function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={<Home />}
        />
        <Route
          path="blog/:id"
          element={<Post />}
        />
      </Routes>
    </Router>
  );
}

Where Post would be your template component.
Inside your template component, you would parse the id that was passed in the URL path.

This tutorial seems pretty good

Note:

It's been a while since I wrote this functionality
This tutorial assumes ReactRouterv6, but appears to have links to other version tutorials

CodePudding user response：

You can create a JS file for all the pages you have in the project - routes. Import all your page components into the same file. Create an array of objects, so each object represents its own renderer component. This way you can run MAP on everything in the array in the same file.

Code for the example:

import Component1 from "./components/Component1.vue";
import Component2 from "./components/Component2.vue";
import Component3 from "./components/Component3.vue";
import Component4 from "./components/Component4.vue";
import Component5 from "./components/Component5.vue";
import Component6 from "./components/Component6.vue";

export default [
    { path: "/component1", component: Component1, name: "component1" },
    { path: "/component2", component: Component2, name: "component2" },
    {
        path: "/component3",
        component: Component3,
        name: "component3",
        props: (route) => ({ id: route.query.id }),
    },
    { path: "/component4", component: Component4, name: "component4" },
    { path: "/component5", component: Component5, name: "component5" },
    { path: "/component6", component: Component6, name: "component6" },
];

Now all you have to do in your APP file is import the file and do a MAP on each of the objects. routes

    <Router>
      <Routes>
        {routes.map((route)=>{
          return (
            <Route path="route.path" element={route.component} />
          )
        })}
      </Routes>
    </Router>