React component is not removed when changing path

user_16235969 0
Viewed 112

I have my application created in create-react-app. when I go to the path / "users / create" the page remains the component of the path users ("users") on the screen and the component is not deleted When reloading the path page ("users / create") it works for me perfectly

I send screenshots of the code

-Routes

function App() {
  return (
    <LoginState>
      <AlertState>
        <DashboardState>
          <DocumentState>
            <UsersState>
              <RelasesState>
                <Router>
                  <Switch>
                    <Route exact path="/login" component={Login}/>
                    <Route exact path="/reset-pwd" component={ResetPwd}/>
                    <div className="wrapper">
                      <Header />
                      <div className="main-panel">
                        <RoutePrivate exact path="/" component={Dashboard}/>
                        <RoutePrivate exact path="/documents" component={Documents}/>
                        <RoutePrivate exact path="/document/:id" component={Document}/>
                        <RoutePrivate exact path="/usuarios" component={Users}/>
                        <RoutePrivate exact path="/usuarios/:userId" component={Users}/>
                        <RoutePrivate exact path="/usuarios/create" component={NewUser}/>
                        <RoutePrivate exact path="/usuarios/show/:id" component={User}/>
                        <RoutePrivate exact path="/usuarios/edit/:id" component={EditUser}/>
                        <RoutePrivate exact path="/comunicados" component={Relases}/>
                        <RoutePrivate exact path="/comunicados/:id" component={Relases}/>
                        <RoutePrivate exact path="/comunicados/send-email/:id" component={Relase}/>
                        <RoutePrivate exact path="/docslab" component={DocsLab} />
                      </div>
                      <Sidebar />
                    </div>
                  </Switch>
                </Router>
              </RelasesState>
            </UsersState>
          </DocumentState>
        </DashboardState>
      </AlertState>
    </LoginState>
  );
}

export default App;

"/usuarios" enter image description here

When changing from the page itself with a link to "create/users" it returns the previous component and below the new one enter image description here

I have noticed that when I remove the dynamic path from "/usuarios/:userId" everything works fine for me, what do you think I have done wrong? Thank you very much for your support.

react-router-dom reactjs javascript
1 Answers

Ok, I'm gathering that in some circumstances your code is rendering both the "/usuarios/:userId" and "/usuarios/create" paths. The reason for this is because you are rendering all your routes into a wrapper in the Switch. This seems to have the effect like it being rendered not in a Switch component at all, meaning all matches are returned and rendered. In other words, the Switch didn't match "/login" or "/reset-pwd" so it is "matching" and rendering the div.

Use a second "inner" Switch component.

The second issue is that a Switch component will also match and render the first match, so order and path specificity matter! "/usuarios/:userId" is less specific than "/usuarios/create", but will also match "/usuarios/create" literally. Order the routes to specify more specific paths before less specific paths. Note that when you specify the order and specificity correctly you don't necessarily need to specify the exact prop on every route since matching is working for you now, not against you.

To be fully correct, only Route and Redirect components are valid children of a Switch, so you will want to render the wrapper into a Route as well. When this is done it will be more clear to you why the "nested" routes weren't working previously.

Switch

Renders the first child <Route> or <Redirect> that matches the location.

<Router>
  <Switch>
    <Route path="/login" component={Login}/>
    <Route path="/reset-pwd" component={ResetPwd}/>
    <Route>
      <div className="wrapper">
        <Header />
        <div className="main-panel">
          <Switch>
            <RoutePrivate path="/document/:id" component={Document}/>
            <RoutePrivate path="/documents" component={Documents}/>
            <RoutePrivate path="/usuarios/show/:id" component={User}/>
            <RoutePrivate path="/usuarios/edit/:id" component={EditUser}/>
            <RoutePrivate path="/usuarios/create" component={NewUser}/>
            <RoutePrivate path="/usuarios/:userId" component={Users}/>
            <RoutePrivate path="/usuarios" component={Users}/>
            <RoutePrivate path="/comunicados/send-email/:id" component={Relase}/>
            <RoutePrivate path="/comunicados/:id" component={Relases}/>
            <RoutePrivate path="/comunicados" component={Relases}/>
            <RoutePrivate path="/docslab" component={DocsLab} />
            <RoutePrivate path="/" component={Dashboard}/>
          </Switch>
        </div>
        <Sidebar />
      </div>
    </Route>
  </Switch>
</Router>
user_86908570
Related