0

In my app.js file, I have 20 pages listed in the import statements, such as

import NewCars from './New/Cars';
import NewTrucks from './New/Trucks';
import CreateNewSevice from './Service/NewService';
import CreateUsedService from './Service/UsedService';

and so on in my Route switch I have

<Switch>
   <Route path='/New/Cars' component={NewCars} />
   <Route path='/New/Trucks' component={NewTrucks} />
   <Route path='/Service/NewService' component={NewService} />
   <Route path='/Service/UsedService' component={UsedService} />
</Switch>

the issue I'm having is that when I try to link to the UsedService component, it keeps taking me to the NewService Component On a link on my service page I have the following:

<Link to='./UsedService'>Schedule Service Appointment</Link>

however, it shows the NewService Component, even if I type http://localhost/Service/UsedService, it renders the new service component. The NewService even appears as my home page when I run the app from VS code with npm start. What could be causing this? This is the only component with this issue. I even tried changing the name of the UseService to see if it was a naming convention thing but no luck, still loaded the NewService

JustWantsToCode
  • 73
  • 1
  • 9
  • What version of react-router are you using? If you are using React Router 5 (or 4) you might need to add the exact prop to your routes. You can read more about that here: https://stackoverflow.com/a/49162423/6477949 – Tor Raswill Nov 16 '21 at 22:12
  • @TorRaswill, I'm using 5.3.0, though this is the only component having this issue. The other ones are loading as expected – JustWantsToCode Nov 16 '21 at 22:14
  • If you comment out the `` in the `Switch` is it still rendering? Have you more than one `Switch` or `Route` rendering for that path? Can you include more complete code? – Drew Reese Nov 16 '21 at 22:24
  • @DrewReese, I removed the path to UsedService, the link still points to the NewService, even though in the tag it's going to the UsedService. That's all the code I'm using for the nav, I only have 1 in my code and that resides on the App.js file. If I make the point to any other page in the web site, it still renders the NewService component. – JustWantsToCode Nov 16 '21 at 22:29
  • The link looks a little suspect, I don't recall though if RRDv5 can use relative links. Can you create a *running* codesandbox that reproduces this navigation issue that we can inspect and debug live? – Drew Reese Nov 16 '21 at 22:31
  • @DrewReese I'll post something shortly, even if I go directly to the page in the browser, it still renders the NewService component, so if I go http://localhost:3000/service/UsedService, it renders the NewService component – JustWantsToCode Nov 16 '21 at 22:35
  • Ok, no worries. Just ping me when a CSB is ready, if you like. – Drew Reese Nov 16 '21 at 22:35
  • @DrewReese, so I was doing some more troubleshooting last night and I deleted the actual /Services/NewService page (NewService.js) and now when I run my app (local), it kicks back an error of [ Failed to compile ./src/App.js Module Not found: Can't resolve './services/NewService' in 'c:\projects\cars\src' . I get this as soon as I go to the URL [ http://localhost:3000] Could that page/module be set somewhere in the project as the home page? I did a search and I can't find it listed anywhere. I'm using VS Code – JustWantsToCode Nov 17 '21 at 12:44
  • Based on your description, and error, you deleted the file but left it's import in and building `App.js` breaks since it can't find the file to import `NewService`. Can you share your package.json file, and if your code is in a public repo, share a link to it? – Drew Reese Nov 17 '21 at 15:56
  • @DrewReese for the time being, it's working, not sure what really happened, but I deleted the file, stopped the project, started the project again and it worked (though had to stop the project several times and close all browser sessions). Not sure what the real cause was, but it's working at the moment. and not sure if it was the code. Before deleting the file, I copied the code to notepad, then when I created a new file, I copied the exact code back to the new file. (NewService.js). – JustWantsToCode Nov 17 '21 at 16:35
  • Stale hot reloader possibly. You may've had something in the browser holding a reference to something in memory and app might've been getting hung up on that. Killing all the dev servers and clear cache/hard reload helps. Ok, since it's working for you now I'm not sure there's much value to this current post. I may vote to close as "unreproducible". Cheers and good luck. – Drew Reese Nov 17 '21 at 16:38

0 Answers0