Knowledge points related to react routing

MK Mack 2021-09-15 06:28:34
knowledge points related react routing


NavLink And encapsulation NavLink

1.NavLink You can highlight the routing links , adopt activeClassName Specifies the style name
 Copy code 

Switch Use

1. Usually ,path and component It's a one-to-one relationship .
2.Switch It can improve the efficiency of route matching ( Single match ).
 Copy code 

Solve the problem of multi-level path refresh page style missing

1.public/index.html in Don't write... When introducing styles ./ Write / ( Commonly used )
2.public/index.html in Don't write... When introducing styles ./ Write %PUBLIC_URL% ( Commonly used )
3. Use HashRouter
 Copy code 

Strict matching and fuzzy matching of routing

1. Fuzzy matching is used by default ( Simple notes :【 The path entered 】 It must include 【 Matched path 】, And in the same order )
2. Turn on strict matching :<Route exact={true} path="/about" component={About}/>
3. Strict matching, don't open it casually , It needs to be reopened , Sometimes when it is turned on, the secondary route cannot be matched
 Copy code 

Redirect Use

1. It is usually written at the bottom of all route registrations , When all routes fail to match , Jump to Redirect Specified route
2. Specific code :
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>
 Copy code 

Nested Route

1. When registering a child route, write the parent route's path value
2. Routes are matched in the order in which they are registered
 Copy code 

Pass parameters to the routing component

1.params Parameters
Routing links ( Portability parameter ):<Link to='/demo/test/tom/18'}> details </Link>
Registered routing ( To declare acceptance ):<Route path="/demo/test/:name/:age" component={Test}/>
Receiving parameters :this.props.match.params
2.search Parameters
Routing links ( Portability parameter ):<Link to='/demo/test?name=tom&age=18'}> details </Link>
Registered routing ( There is no need to declare , Just register normally ):<Route path="/demo/test" component={Test}/>
Receiving parameters :this.props.location.search
remarks : Acquired search yes urlencoded Encoded string , Need help querystring analysis
3.state Parameters
Routing links ( Portability parameter ):<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}> details </Link>
Registered routing ( There is no need to declare , Just register normally ):<Route path="/demo/test" component={Test}/>
Receiving parameters :this.props.location.state
remarks : Refresh can also retain parameters
 Copy code 

Programming route navigation

 With the help of this.prosp.history On the object API Jump to operation route 、 Forward 、 back off
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()
 Copy code 

BrowserRouter And HashRouter The difference between

1. The underlying principle is different :
BrowserRouter It uses H5 Of history API, Are not compatible IE9 Up to .
HashRouter It uses URL Hash value of .
2.path In different forms
BrowserRouter There is no... In the path of #, for example :localhost:3000/demo/test
HashRouter Your path contains #, for example :localhost:3000/#/demo/test
3. Refresh the route state The effect of parameters
(1).BrowserRouter There is no effect , because state Save in history In the object .
(2).HashRouter The refresh will result in routing state Missing parameter !!!
4. remarks :HashRouter It can be used to solve some problems related to path errors .
 Copy code 
版权声明
本文为[MK Mack]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210909122358658y.html

  1. Flutter: résoudre le futur blocage en utilisant Isolate
  2. Résumé des opérations courantes pour les données de structure de l'arbre frontal
  3. Ant Design Transfer Twin Tree Shuttle box "make Wheels"
  4. De la carte de pensée à la base et à l'approfondissement, prenez note de l'expérience d'entrevue d'un octet sautant le poste de recherche et développement Java.
  5. Apprenez les composants d'implémentation de vue et Publiez - les à NPM
  6. [Questions d'entrevue à haute fréquence] À vous de choisir
  7. Une faible connaissance de beginpath () provoque une superposition de style lors de la peinture d'un dessin en toile
  8. React Hooks, laisse - moi t'emmener étudier.
  9. Comment la copie profonde résout - elle les références circulaires?
  10. JavaScript Advanced Programming (3rd Edition) Reading note 6
  11. Analyse de l'URL
  12. Discussion préliminaire sur xss
  13. Solution: développement de la page Web Wechat, obtenir la fosse Piétinée par le flux d'entrée de la caméra via navigator.mediadevice.getusermedia ()
  14. Des milliers de questions d'entrevue sélectionnées n'ont pas encore ét é effacées.
  15. Les questions d'entrevue de niveau intermédiaire et avancé d'Android au fil des ans sont entièrement incluses, et l'algorithme est distribué microservice
  16. J'ai résumé toutes les questions d'entrevue.
  17. Compréhension de la réactivité des données de vue
  18. Note de service CSS (vi): Flex, page mobile et mise en page réactive
  19. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  20. 手把手教你搭建微信小程序服务器(HTTPS)
  21. JavaScript Review sketch - 1
  22. Analyse du bootstrap webpack
  23. sqli-labs-less-18 http头user agent+报错注入
  24. Génération de code nest pour l'outil CLI de nestjs
  25. JS | This
  26. Augmentation des variables
  27. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  28. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  29. Summary of basic knowledge points of JavaScript language (mind map)
  30. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  31. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  32. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  33. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  34. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  35. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  36. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  37. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  38. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  39. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  40. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  41. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  42. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  43. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  44. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  45. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  46. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  47. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  48. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  49. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  50. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  51. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  52. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  53. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  54. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  55. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  56. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  57. Basic knowledge of components in Vue "I"
  58. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  59. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  60. Want to know the implementation and application of single instance mode in the front end?