problem adding a new route to the file routes.json

Hi, guys, I have downloaded your project ( very good ) and I started playing around with him, I was trying to add new functionality, and in the point of adding the new route, it gives me an error, I can’t add a new route constant to the file routes.json, I don’t know why but it doesn’t work when I use the new route, any advice?

Prerequisites

• Using yarn
• Using node 10.x
• Using an up-to-date master branch
• Using latest version of devtools. See wiki for howto update
• Link to stacktrace in a Gist (for bugs)
• For issue in production release, devtools output of DEBUG_PROD=true yarn build && yarn start
• Tried solutions mentioned in #400

Expected Behavior

Well my new route should work, but instead, the app doesn’t show the main screen.

Current Behavior

The app doesn’t show the home page

Possible Solution

Steps to Reproduce (for bugs)

1. Change the routes.sjon with this code : { “HOME”: “/”, “COUNTER”: “/counter”, “PEPE”: “/customer” }

2.Add to the routes.tsx with this code import CustomerPage from ‘./containers/CustomerPage’;

<Route exact path={“/customer”} component={CustomerPage} />

1. Of course, you need to create a new component called CustomerPage, just take the home component and renamed and put inside it a different text from the home screen.

2. I have added a toolbar from material UI that works perfectly, I’m going to upload my project with this link and you can see what I say.

Context

I’m trying to create an app and i need to add new routes and new screens to the project

Your Environment

• Node version : 12.18.0
• Version or Branch used : last one
• Operating System and version : Windows 10
• Link to your project : my project is in my pc, i dont have any version published in any site, if you need

thank you so much

[jooohhn]

I couldn’t reproduce on v1.3.0. I think the issue is related to the ordering of your <Routes> in routes.tsx

This example will render HomePage instead of CustomerPage even if the given path is /customer. React-router’s Switch component renders the first child <Route> that matches the URL (basically /customer matches the path / first and renders HomePage)

<Switch>
  <Route path={routes.COUNTER} component={CounterPage} />
  <Route path={routes.HOME} component={HomePage} />
  <Route path={routes.CUSTOMER} component={CustomerPage} />
</Switch>

Problem should be fixed by ordering routes by COUNTER -> CUSTOMER -> HOME or using the exact property

[SingularityF]

I couldn’t reproduce on v1.3.0. I think may be related to the order of your <Routes> in routes.tsx

This example will render HomePage instead of CustomerPage even if the given path is /customer. React-router’s Switch component renders the first child <Route> that matches the URL (basically /customer matches the path / first and renders HomePage)

<Switch>
  <Route path={routes.COUNTER} component={CounterPage} />
  <Route path={routes.HOME} component={HomePage} />
  <Route path={routes.CUSTOMER} component={CustomerPage} />
</Switch>

If this is the case, the problem can be fixed by ordering routes by COUNTER -> CUSTOMER -> HOME or using the exact property

I was facing the same issue and adding exact worked for me.