I'm facing problem creating nested routes in app.

[prayaslashkari]

So, I was creating a list of meetings page from that redirected to our app.

Basically. Routes that I have created in Index.js

/meetings -> accessible / -> accessible /:id -> accessible

Now, nested routes

/meetings/ -> working /meetings/past -> I am not able to directly access this route from browser (whenever I paste this address in browser it shows an empty page)

Its not working in edumeet only but working everywhere else.

[hkizilhan]

Route position matters. So you sould place it in correctly in server.js.

app.use(express.static('public'));   // After this line - it matches static files, if exist
      app.use('/custom-route/*', (req, res) => {...} );
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));  // Before this line 
///                                                  if no routes matches, it sends react application's index

it may be necessary to edit "isPathAlreadyTaken" function in server.js too.

[prayaslashkari]

All those URL that i've added are all react routes not server custom routes. So I am facing problem in react router in the frontend.

[prayaslashkari]

Additional Information

In Index.js

In Dashboard.js

So I am not able to access "localhost:port/dashboard/meetings". I can access this route by link tag inside the app but not directly refreshing this address.

Additional Information, havent made any breaking changes in the app just trying to creating meetings dashboard but came across this issue.

@so010

[prayaslashkari]

Route position matters. So you sould place it in correctly in server.js.

app.use(express.static('public'));   // After this line - it matches static files, if exist
      app.use('/custom-route/*', (req, res) => {...} );
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));  // Before this line 
///                                                  if no routes matches, it sends react application's index

it may be necessary to edit "isPathAlreadyTaken" function in server.js too.

I've added additonal details please let me know if i am missing something.

[hkizilhan]

Additional Information Additional information is good point, don't forget that.

React routes are client side. So, they need 'up and running' react application in client side. This is why links works inside the application and not direct link. If you want to direct link working, see my first answer for backend application routes. It is, what you are looking for...

[prayaslashkari]

@hkizilhan what do you propose man? I essentially tried implementing something like this. --> https://www.pluralsight.com/guides/how-to-create-nested-tab-routes-with-react-router

According to your solution, I added

app.use('/dashboard/meetings', (req, res) => {
    console.log('Its the console log!!!');
  });

I got a log at the server terminal

Now what do you propose I should return?

app.use('/dashboard/meetings', (req, res) => {
//I tried this, this aint doing anything
   res.sendFile(`${__dirname}/public/index.html`);
  });

Just point in the right direction, bit noob at the server side of things.

[hkizilhan]

It seems client side problem. Can't say anything at this point...