web-dev-qa-db-fra.com

réagir à un lien par rapport à une fonction de balise et de flèche

Salut les gars, je suis un programmeur débutant qui vient de commencer sur Reactor.

J'ai deux questions. Quelle est la différence entre l'utilisation de <Link to="/page"> et <a href="page">? Les deux font exactement la même requête get à /page mais j'obtiens une erreur lorsque j'utilise <a href="page"> mais ça marche quand j'utilise <Link to="/page"> quand je nichent des routes. Je ne comprends pas comment il pourrait y avoir une différence quand je sais que les deux rendent exactement la même URL

La deuxième est la fonction de flèche étrange dans la documentation de Reactor Routeur v4

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

Je sais () => {} ce sont des nouveautés dans ES6 mais je ne trouve rien sur des crochets normaux au lieu de parenthèses. Que sont-ils?

Modifier

Ma classe index.js (j'ai toutes les importations)

render((
    <Router>
        <div>
            <Route component={App}/>
        </div>
    </Router>
), document.getElementById('root')
);

Ma classe App.js

class App extends Component {
render() {
    return (
        <div className="container">
            <header>
                <span className="icn-logo"><i className="material-icons">code</i></span>
                <ul className="main-nav">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/teachers">Teachers</Link></li>
                    <li><Link to="/courses">Courses</Link></li>
                </ul>
            </header>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/teachers" component={Teachers}/>
            <Route path="/courses" component={Course}/>
        </div>
    );
}
}

export default App;

L'erreur que je reçois. Cannot GET /about sur le navigateur lorsque j'essaye de passer à localhost:8080/about. Cependant, lorsque je clique sur le bouton about, il va exactement à la même URL /about et rend parfaitement

javascriptreactjsreact-router
18
forJ

Cela peut être un peu tard pour résoudre votre problème et vous l'avez peut-être bien compris. Mais voici mon point de vue:

D'abord:

Quelle est la différence entre l'utilisation de <Link to="/page"> et <a href="page">

  • En surface, vous semblez comparer des pommes et des oranges ici. Le chemin dans votre balise d'ancrage est un chemin relatif tandis que celui dans le Link est absolu (à juste titre, je ne pense pas que react-router supporte encore les chemins relatifs). Le problème que cela crée est que vous êtes sur /blah, en cliquant sur votre Link ira à /page, en cliquant sur le <a href='page' /> vous amènera à /blah/page. Ce n'est peut-être pas un problème car vous avez confirmé l'exactitude de l'URL, mais vous avez pensé à le noter.
  • Une différence un peu plus profonde, qui n'est qu'un addon à la réponse de @Dennis (et aux documents qu'il a pointés), est lorsque vous êtes déjà sur une route qui correspond à ce que pointe Link. Disons que nous sommes actuellement sur /page et le Link pointe vers /page ou même /page/:id, cela ne déclenchera pas une actualisation de la page complète pendant qu'un <a /> tag le fera naturellement. Voir problème sur Github .

Un correctif que j'ai utilisé pour résoudre mon petit besoin était de passer une propriété state dans un lien comme ça <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>. Ensuite, je peux vérifier cela dans le composant cible (disons <Page />) componentWillReceiveProps comme ceci:

componentWillReceiveProps(nextProps){
  if (nextProps.location.state === 'desiredState') {
    // do stuffs
  }
}

Deuxième question:

la fonction de flèche bizarre dans la documentation de react router v4 ... Je ne trouve rien sur des crochets normaux au lieu de parenthèses. Que sont-ils?

Fonctions fléchées; encore une fois, @Dennis et @Jaromanda X l'ont en quelque sorte abordé. Cependant, j'ai trois bits à ajouter:

  • Lorsque vous avez () => blah sans les accolades bouclées {}, vous renvoyez implicitement tout ce qui suit => dans ce cas blah. Mais lorsque vous avez des accolades immédiatement après la flèche, il vous appartient maintenant de return quelque chose si vous le souhaitez. Alors () => blah (qui d'ailleurs est synonyme de () => (blah)) sera plus similaire à () => { return blah } et pas () => { blah }.
  • Alors, que se passe-t-il si vous souhaitez renvoyer un objet: { blah: blah }; c'est ce que @Jaromanda X voulait dire. Vous devrez alors faire () => ({ blah: blah }) ou simplement () => ({ blah }) pour un retour implicite ou vous pouvez retourner explicitement comme ceci () => { return { blah: blah } }.
  • Mon troisième bit est de vous indiquer MDN

J'espère que ça aide.

29
flash

Il n'y a rien de mieux que de regarder la source du code.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

Vous pouvez voir que Link est un composant qui utilise en interne l'historique . Quelle est la bibliothèque du module || derrière l'historique et la navigation de react-router. Et venez avec différents modes (dans l'historique de la mémoire, browserHistory, hashHistory. Et même personnalisé).

Oui, par analogie, il rend une balise d'ancrage mais le comportement par défaut est remplacé (preventDefault ()). Ils auraient pu utiliser juste un div. Mais pas tout à fait raison. Quant à la raison ci-dessous.

Donc, fondamentalement, cela fonctionne comme ça:

Observer la condition ci-dessous

  if (
          !event.defaultPrevented && // onClick prevented default
          event.button === 0 && // ignore everything but left clicks
          (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
          !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {

}

si la condition ci-dessus est remplie. Il utilisera l'historique (pousser ou remplacer). Sinon, cela laissera le comportement normal du navigateur. Et donc dans ce cas, ce sera juste une balise d'ancrage normale <a />. Exemple de laisser le navigateur gérer target = 'blank'. La condition est bien expliquée. Ensuite, selon le type d'objet historique. Le changement de comportement. Pas le comportement de lui-même. Mais juste le résultat du type d'objet historique.

En résumé:

<Link /> Est un composant qui rend une balise d'ancrage <a />. Cependant, dans les conditions principales, le comportement par défaut est empêché (preventDefault()). Cela lui permet d'appliquer la modification à l'objet historique (événement onClick). Sur quelle base est basée la navigation de Reactor-Routeur. Et sur certaines conditions comme mentionné ci-dessus. Cela revient simplement au comportement du navigateur. Et juste être exactement une balise d'ancrage <a /> (Pas de preventDefault()).

Pour l'usage. Si vous utilisez React-router. Ensuite, il vous suffit d'utiliser Link.

0
Mohamed Allal

Le composant vous permet de faire plus que l'élément de lien normal. Par exemple, parce que c'est un composant React vous avez les avantages d'avoir un état et ce qui ne l'est pas (si vous le souhaitez). Vous pouvez voir plus de documentation sur ici . Sans l'erreur, je ne sais pas ce qui se passe, mais je soupçonne que la bibliothèque de routage veut que vous utilisiez le composant, sur un élément html normal.

En ce qui concerne () => {}, Il s'agit d'une construction qui est appelée une fonction anonyme ou une expression lambda. C'est fondamentalement la même chose que d'enregistrer une fonction dans une variable: var x = function(){ return (<div>...) }; si vous avez quelque chose dans la première parenthèse, c'est un paramètre auquel vous avez accès: const x = (y) => return y*2; La raison pour laquelle c'est fait dans = React consiste à exposer la portée de la fonction au composant dans lequel elle se trouve.

0
Dennis