Introduction to routing in react
Most modern front-end applications are SPA (single page applications), that is, applications with only one HTML page. It is more popular because of its better user experience and less pressure on the server. In order to effectively use a single page to manage the original multi page function, front-end routing came into being. Front end routing function: allows users to navigate from one view (page) to another
-
Front end routing is a set of mapping rules. In React, it is the corresponding relationship between URL path and component
-
Using React routing is simply to configure paths and components (pairing)
Basic for React routing
step
- Installation package.npm I react router DOM (recently released 6)
- This package provides three core components: hashrouter, route and link
- Import the package and use. Use HashRouter to wrap the entire application. There will only be one Router in a project
import { HashRouter, Route, Link } from 'react-router-dom
3. Use Link to specify the navigation Link
Code demonstration
import React from 'react' import ReactDom from 'react-dom' import { HashRouter, Route, Link } from 'react-router-dom' import Search from './pages/Search.jsx' import Comment from './pages/Comment.jsx' export default function App () { return ( <div> <h1>react Basic use of routing</h1> <HashRouter> <Link to="/comment">comment</Link> <Link to="/search">search</Link> <Route path="/comment" component={Comment} /> <Route path="/search" component={Search} /> </HashRouter> </div> ) } ReactDom.render(<App />, document.getElementById('root'))
Routing three objects - Router
Understand two routes
Hashrouter: hash mode
BrowserRouter: history mode
content
Router component: wrap the whole application. A React application only needs to be used once
There are two common routers: HashRouter and BrowserRouter
-
HashRouter: implemented using the hash value of the URL
-
Principle: it is realized by listening to the hashchange event of window
-
-
(recommended) browserouter: implemented using the history.pushState() API of H5
-
Principle: it is realized by listening to the pop state event of window
-
Code recommendation:
Use the import renaming of es6 to unify the name: no matter which routing object is imported, it is called Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import { HashRouter as Router, Route, Link } from 'react-router-dom'
Link of three routing objects
difference
Master the difference between Link and NavLink
You can use NavLink to set the highlight effect
Import test
import { Link, NavLink } from 'react-router-dom
Link
The Link component will eventually be rendered as an a tag to specify the route navigation
-
to attribute, which will be rendered as the href attribute of a tag in the future
-
The link component cannot show which link is selected
NavLink
NavLink component, a more special Link component, can be used to specify the current navigation highlight
The style name is. active. You can modify the highlight effect by yourself
explain:
-
The to attribute, used to specify the address, will be rendered as the href attribute of the a tag
-
activeClassName: used to specify the highlighted class name. The default is active. Generally do not modify.
-
Exact: exact match, which means that the address bar and the attribute value of to must exactly match the class name to take effect
Test code
import React from 'react' import ReactDom from 'react-dom' import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom' import Search from './pages/Search.jsx' import Comment from './pages/Comment.jsx' export default function App () { return ( <div> <h1>react Basic use of routing-Link</h1> <Router> <div> Link: <Link to="/search">search</Link> <Link to="/comment">comment</Link> </div> <div> NavLink: Built in highlight class <NavLink to="/" exact>homepage</NavLink> <NavLink to="/search">search</NavLink> <NavLink to="/comment">comment</NavLink> </div> <Route path="/comment" component={Comment} /> <Route path="/search" component={Search} /> </Router> </div> ) } ReactDom.render(<App />, document.getElementById('root'))
Summary
-
Both link and NavLink are used for route jump. They all use the to attribute to specify the jump address
-
The difference between link and NavLink is that the path pointed to by NavLink will have its own css class name called. action
Route, one of the three objects of routing
Function and format of route
-
Role: determine route matching rules
-
Format: < route path = "/ XX / XX" component = {component} > < / route >
Matching rules
Noun agreement:
-
Path: the value of the path attribute in the Route component
-
pathname: refers to the following format
-
Attribute value of to in link component
-
Address in address bar
-
Fuzzy matching rule
-
As long as pathname starts with path, the match is successful
-
If the matching is successful, load the corresponding components;
-
The whole matching process is to match one by one. If a match is successful, it will not stop matching.
Fuzzy matching and exact matching
-
The default is fuzzy matching
-
Supplementary exact can be set to match exactly
Example
import React from 'react' import ReactDom from 'react-dom' import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom' const Home = () => <div>homepage</div> const Article = () => <div>Article list page</div> const ArticleDetail = () => <div>Article details page</div> export default function App () { return ( <div> <h1>react Basic use of routing</h1> <Router> <NavLink to="/">homepage</NavLink> <NavLink to="/article">Article list page</NavLink> <NavLink to="/article/123">Article details page-123</NavLink> <hr /> <Route path="/" component={Home} /> <Route path="/article" component={Article} /> <Route path="/article/123" component={ArticleDetail} /> </Router> </div> ) } ReactDom.render(<App />, document.getElementById('root'))
Summary
-
Description of path
-
By default, / can match any / start path
-
If the path of path matches, the corresponding component will be render ed
-
-
exact, which means exactly matching a path
-
Generally speaking, if the path is configured with /, you need to configure the exact attribute
-
Switch and 404
Switch
Wrap multiple Route components with Switch components.
Under the Switch component, no matter how many Route routing rules match successfully, only the first matching component will be rendered
<Switch> <Route path="/" exact component={Home} /> <Route path="/article" component={Article} /> <Route path="/article/123" component={ArticleDetail} /> <Route component={Page404} /> </Switch>
Process 404 pages
Idea: without setting the path attribute, put the route corresponding to page 404 in the last position inside the switch
<Route path="/" exact component={Home} /> <Route path="/article" component={Article} /> <Route path="/article/123" component={ArticleDetail} /> <Route component={Page404} />
Page Jump Redirect
<Redirect from="/" exact to="/comment" />