Because the text is too long, part of the text has been intercepted. If you are interested, you can follow my public account “Life Code”.
In the original
React-router-dom tutorial
React-router-dom tutorial
We need to create the React – Pro project
create-react-app react-pro
cd react-pro
yarn add react-router-dom
Copy the codeWe see the following table of contents:
Create a new hellorouter.js file under SRC as follows:
import React, { PureComponent } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
// Split routes into arrays, a bit like vUE routing configuration
const routes = [
{
to: '/'.
content: 'Home'
},
{
to: '/about'.
content: 'About'
},
{
to: '/users'.
content: 'Users'
}
]
// Create a form of the component, as a variable
const lis = routes.map((item, index) = > {
return (
<li key={index}>
<Link to={item.to}>
{item.content}
</Link>
</li>
)
})
// Class component form
class Home extends PureComponent {
render() {
return <h2>Home</h2>;
}
}
class About extends PureComponent {
render() {
return <h2>About</h2>;
}
}
class Users extends PureComponent {
render() {
return <h2>Users</h2>;
}
}
// The Switch Route is similar to the js Switch case
export default class HelloRouter extends PureComponent {
render() {
return (
<Router>
<div>
<nav>
<ul>
{lis}
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about" component={About} />
<Route path="/users" component={Users} />
<Route path="/" component={Home} />
</Switch>
</div>
</Router>
);
}
}
Copy the codeThe effect is as follows:
Embedded routines by
React nested routines;
First, we created a new qiantaorouter.js file under SRC with the following code:
import React, { PureComponent } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams,
useRouteMatch
} from "react-router-dom";
const routes = [
{
to: '/'.
content: 'Home'
},
{
to: '/about'.
content: 'About'
},
{
to: '/users'.
content: 'Users'
},
{
to: '/topics'.
content: 'Topics'
}
]
const lis = routes.map((item, index) = > {
return (
<li key={index}>
<Link to={item.to}>
{item.content}
</Link>
</li>
)
})
class Home extends PureComponent {
render() {
return <h2>Home</h2>;
}
}
class About extends PureComponent {
render() {
return <h2>About</h2>;
}
}
class Users extends PureComponent {
render() {
return <h2>Users</h2>;
}
}
function Topic() {
let { topicId } = useParams();
return <h3>Requested topic ID: {topicId}</h3>;
}
function Topics() {
let match = useRouteMatch();
console.log("matach", match)
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
Props v. State
</Link>
</li>
</ul>
{/* The Topics page has its own <Switch> with more routes
that build on the /topics URL path. You can think of the
2nd <Route> here as an "index" page for all topics, or
the page that is shown when no topic is selected */}
<Switch>
<Route path={`${match.path}/:topicId`}>
<Topic />
</Route>
<Route path={match.path}>
<h3>Please select a topic.</h3>
</Route>
</Switch>
</div>
);
}
export default class HelloRouter extends PureComponent {
render() {
return (
<Router>
<div>
<nav>
<ul>
{lis}
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about" component={About} />
<Route path="/users" component={Users} />
<Route path="/topics" component={Topics} />
<Route path="/" component={Home} />
</Switch>
</div>
</Router>
);
}
}
Copy the codeOne of the things that stands out
- UseRouteMatch is used to resolve routing objects
- UseParams parses route parameters
The major components
Routing components: BrowserRouter and HashRouter
BrowserRouter uses the browser’s History API to manage urls and interact with the browser, requiring the server to add configuration so that all URL requests return to the same page
The HashRouter stores the current location of the page in the hash part of the URL (http://example.com/#/your/page.) without requiring special configuration on the server
Route matching components Route and Switch
The Switch component searches for routes under it, the Route component, and renders the first matched Route while ignoring the other routes as the view rendering exit
<Switch>
<Route path={` ${match.path} /:topicId`} >
<Topic />
</Route>
<Route path={match.path}>
<h3>Please select a topic.</h3>
</Route>
</Switch>
Copy the codeNavigation components Link, NavLink, and Redirect
The Link component is used to create links in the application. Link will be rendered as an A tag
<ul>
<li>
<Link to={` ${match.url} /components`} >Components</Link>
</li>
<li>
<Link to={` ${match.url} /props-v-state`} >
Props v. State
</Link>
</li>
</ul>
Copy the codeNavLink is a special type of Link that supports automatic addition of active classes
<NavLink to="/react" activeClassName="hurray">
React
</NavLink>
// When the URL is /react, this renders:
// <a href="/react" className="hurray">React</a>
// When it's something else:
// <a href="/react">React</a>
Copy the codeAny time you want to force navigation, you can render a Redirect component. It will use it to support navigation when rendered
<Redirect to="/login" />
Copy the codeThe code segment
Code splitting, which means incremental downloading of web pages and packages that are not used will not be loaded we use webpack, @babel/plugin-syntax-dynamic-import, And loadable components to implement code splitting first install dependency packages
yarn add @babel/preset-react @babel/plugin-syntax-dynamic-import loadable-components --dev
Copy the codeConfigure the. Babelrc file (if not, create a new one in the project root directory)
{
"presets": ["@babel/preset-react"].
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
Copy the codeModify the App. Js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import loadable from "@loadable/component";
import Loading from ".. /components/Loading";
import "./App.css";
const Counter = loadable((a)= > import(".. /features/counter/Counter"), {
fallback: <Loading />.
});
const Book = loadable((a)= > import(".. /features/book/Book"), {
fallback: <Loading />.
});
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Counter} />
<Route path="/book" component={Book} />
</Switch>
</Router>
);
}
export default App;
Copy the codeRolling state recovery
The page automatically scrolls to the top or restores to the scroll position when the route is switched