Question 303481 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can React-Router handle more than 20k paths?

I am migrating an ASP.NET Web Form site to React + ASP.NET Core API.

In the ASP.NET Site, customers were subscribing to the system by filling a form in which they were entering in a field a unique URL for their profile (such as "mydomain.com/CustomerURLX").

The ASP.NET server script was creating a physical folder on the server, such as "mydomain.com/CustomerURLX", "mydomain.com/CustomerURLY". Once the folder was created, the script was also creating in that folder a single file called default.htm that was redirecting to ie:

  • "mydomain.com/loadCustomerProfile.aspx?ID=1"
  • "mydomain.com/loadCustomerProfile.aspx?ID=2"

The customers were using these URLs to access in a more friendly manner their profile on our web site.

All of the customers info are stored in a Database:

ClientID: 1 | MainURL: CustomerURLX
ClientID: 2 | MainURL: CustomerURLY
ClientID: 3 | MainURL: CustomerURLZ
etc.

So the question is, in React, would it be possible to query the database, then from the query result, to loop and create multiple Routes like "mydomain/CustomerURLX", etc. that would then redirect to "mydomain.com/loadProfile/ID"? The database contains more than 20k customers rows (so more than 20k routes would be created), would it be a good practice in React regarding performance? Would it be better to create a local json file containing all customers URLS to create routes? Would it still be a good practice to create more than 20000 routes scanning a json file? Should I continue, like I was doing with ASP.NET, to create physical folders on the server for my redirect instead of using the React-Router? I am using [email protected].

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I may have found a solution using the wildcard route from the react router, like: { path: '*', element: WildCardPath }

    Then, the WildCardPath component would be like:

    import React from 'react';
import { useLocation } from 'react-router-dom';

const WildCardPath: React.FC = () => {
    const { pathname } = useLocation();
    const splitLocation = pathname.split('/');
    // make sure it is a single sub folder (such as mydomain.com/xyz),
    // avoid looking for client url if wildcard url contains more than 1 sub folder (like mydomain.com/abc/xyz)
    if (splitLocation.length > 2) {
        console.log('redirect to the 404 component');
    } else {
        const possibleClientURL = splitLocation[1];
        //fetch API and check if the database contain a row with MainURL=possibleClientURL
        //if API returns a row, redirect to a LoadProfile component with ClientID as param
        //if API returns no row, redirect to the 404 component
    }
    return <div>WildCardPath</div>;
};

export default WildCardPath;

  2. 0

    You don’t need to create a static route path in the app for each and every possible customer id value, this would be incredibly wasteful, difficult to read/maintain, and not efficient or DRY.

    You should instead render a single route with a dynamic path.

    Instead of this

    ...
<Route path="/loadProfile">
  <Route path="1" element={<Customer />} />
  <Route path="2" element={<Customer />} />
  <Route path="3" element={<Customer />} />
  ...
  <Route path="9999" element={<Customer />} />
  <Route path="10000" element={<Customer />} />
  <Route path="10001" element={<Customer />} />
  ...
  <Route path="19998" element={<Customer />} />
  <Route path="19999" element={<Customer />} />
  <Route path="20000" element={<Customer />} />
</Route>
...

    Use this

    ...
<Route path="/loadProfile">
  <Route path=":customerId" element={<Customer />} />
</Route>
...

    or

    ...
<Route path="/loadProfile/:customerId" element={<Customer />} />
...

    Use the useParams hook in the routed component, Customer in this example, to read the current customerId path parameter value.

    import { useParams } from 'react-router-dom';

...

const Customer = () => {
  const { customerId } = useParams();

  useEffect(() => {
    // logic to fetch/load specific profile
  }, [customerId]);

  ...

};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search