1
votes

route vers un composant différent pour des routes similaires avec un routeur de réaction

J'essaie d'acheminer vers différents composants, mais pour la dernière route, je l'attrape

<Switch>
    <Route path="/users" exact strict component={Users}/> // this one works fine
    <Route path="/users/new" exact strict component={NewUser}/> // this one is not. the next route is catching it...
    <Route path="/users/:userId" exact strict component={UserDetails}/>
</Switch>

merci pour votre aide.

reactjs react-router

3 commentaires

Vous venez de supprimer exact et strict

J'ai essayé @SanatGupta mais montre les deux composants en même temps :(

@handsome, il y a beaucoup de réponses de travail ici, vous pouvez les essayer

4 Réponses :

0
votes

Bonjour, c'est mon itinéraire de base, il fonctionne très bien pour moi, jetez un œil.

Merci

import React, { Component } from "react";
import "./App.css";
import login from "./login";
import Home from "./Home";
import GoogleApi from "./GoogleApi";
import State from "./State";
import { BrowserRouter, Router, Route, Link, Switch } from "react-router-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={login} />
            <Route path="/googleapi" component={GoogleApi} />
            <Route path="/home" component={Home} />
            <Route path="/state" component={State} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

3 commentaires

tous vos itinéraires ont des noms différents. dans mon cas, j'ai / users / new et / users / 123

Mais votre composant est différent, voyez-vous qu'il fonctionne bien pour la même chose que votre route

Veuillez renvoyer votre candidature

0
votes

Réorganisez vos itinéraires, cela fonctionne bien.Je l'ai testé dans mon projet

    <Route path="/users/new" exact  component={NewUser}/> 
    <Route path="/users/:userId" exact  component={UserDetails}/>
    <Route path="/users" exact  component={Users}/>

0 commentaires

1
votes

Je pense que si vous réorganisez vos itinéraires, cela fonctionnera, voici mon idée

<Switch>
    <Route exact path="/users/new" component={NewUser}/>
    <Route path="/users/:userId" component={UserDetails}/>
    <Route path="/users" component={Users}/> // this one works fine
</Switch>

Cela fonctionne pour moi

Vous pouvez essayer ceci, j'espère que cela fonctionnera

1 commentaires

cela a fonctionné pour moi. J'ai imbriqué maintenant. Merci

0
votes

<BrowserRouter>
          <Switch>
            <Route exact path="/users" component={Users} />
            <Route path="/users/new" component={NewUser} />
            <Route path="/users/:userId" component={UserDetails} />
          </Switch>
        </BrowserRouter>

0 commentaires