1
votes

Réagir la redirection du routeur lorsque l'URL n'est pas correcte

Pouvez-vous m'aider!

Je suis coincé avec les pamètres d'URL. Lorsque je tape http: // localhost: 3000 / # / willmatch / sdf , alors j'ai redirigé. C'est génial, c'est ce que je veux. Mais lorsque http: // localhost: 3000 / # / willmatch111 / , rien ne se passe.

Est-il possible d'être redirigé lorsque l'URL n'est pas correcte?

J'ai essayé de saisir http: // localhost: 3000 / # / willmatch1 a>, mais je reste sur WillMatch, mais je souhaite obtenir NoMatch si l'URL n'est pas correcte

import React, { Component } from 'react';
import { HashRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/willmatch">Will Match</Link></li>
            <li><Link to="/will-not-match">Will Not Match</Link></li>
            <li><Link to="/also/will/not/match">Also Will Not Match</Link></li>
          </ul>

          <Switch>
            <Route path="/" exact component={Home} />
            <Route exact path="/:id" component={WillMatch} />
            {/* <Route component={NoMatch} /> */}
            <Redirect to="/" />
          </Switch>
        </div>
      </Router>
    );
  }
}

function Home() {
  return <h1>Home</h1>
}

function WillMatch({ match }) {
  return <h1>{match.params.id}</h1>
}

function NoMatch() {
  return <h1>NoMatch}</h1>
}

export default App;

reactjs react-router

2 commentaires

Copie possible de la page par défaut du routeur de réaction v4 (page non trouvée)

non, ils ne parlent pas des paramètres d'URL

3 Réponses :

1
votes

Essayez

/: id est un espace réservé et il correspond à tout. Sans strict , il correspond à / peu importe et / peu importe / . Avec strict , il ne correspond qu'à / peu importe .

Vous devez soit répertorier tous les chemins valides, soit vérifier props.match.params.id dans le composant WillMatch et rediriger s'il n'est pas valide.

2 commentaires

J'ai essayé d'entrer localhost: 3000 / # / willmatch1 , mais je reste sur WillMatch, mais je je veux obtenir NoMatch si l'URL n'est pas correcte

Merci! Quelque chose comme ca? function WillMatch ({match}) {if (match.params.id == 'willmatch') {return

{match.params.id}

} else {return ; }} Je ne suis pas doué pour la syntaxe de réaction)

0
votes

Vous devriez pouvoir placer quelque chose comme ça au bas de vos itinéraires, assurez-vous qu'il est en bas sinon il correspondra à chaque itinéraire. Il redirigera si l'itinéraire n'est pas trouvé parmi les autres!

1 commentaires

J'ai essayé d'entrer localhost: 3000 / # / willmatch1 , mais je reste sur WillMatch, mais je je veux obtenir NoMatch si l'URL n'est pas correcte

2
votes

On dirait qu'il pense peut-être que willmatch est : id . J'en ai un qui fonctionne comme:

    <Route path="/thing/:id" component={WillMatch} />

Vous pouvez également essayer:

<Switch>
    <Route path="/" exact component={Home} />
    <Route path="/:id" component={WillMatch} />
    <Route path="/notfound" exact component={NoMatch} />
    <Redirect to="/notfound" />
</Switch>

Un exemple similaire est fourni ici:

https://reacttraining.com/react-router/web/example/no -match

Un rend le premier enfant qui correspond. Un sans chemin correspond toujours

3 commentaires

J'ai essayé d'entrer localhost: 3000 / # / willmatch1 , mais je reste sur WillMatch, mais je je veux obtenir NoMatch si l'URL n'est pas correcte

Réponse mise à jour. Dans celui sur lequel je travaille, j'ai supprimé exact de l'itinéraire : id .

ça ne marche pas. avez-vous essayé votre propre code? ce n'est pas un exemple similaire. lorsque cette URL localhost: 3000 / # / willmatch n'est pas correcte, par exemple localhost: 3000 / # / willmatch1 localhost: 3000 / # / willmatsfdch localhost: 3000 / # / wi12llmatch je veux être redirigé vers le NoMatch.