React-router-dom source Code: React-router-dom

Context-react: context-router-dom: context-router-dom: BrowserRouter

Today I will bring you a translated article. React-router-dom

This article is the second in our react-router-dom source code debunking series. It’s also preparatory knowledge.

If you want to read the first article, please come this way. Context-react is a powerful tool for accessing data across components

The basic components

The React Router has three components:

  • Router Component (BrowserRouter, HashRouter)
  • Route Matching Component (Route, Switch)
  • Navigation Component (Link)

To use react-router-dom, we need to install the package in the project path

npm install react-router-dom
Copy the code

Once installed, the components listed above are available via react-router-dom.

import { BrowserRouter, Route, Link } from "react-router-dom";
Copy the code

Routers

For React Router based Web applications, the root component should be a Router component (BrowserRouter, HashRouter). In the project, react-router-dom provides both and routes. Both routes create a history object. If our application has a server responding to web requests, we usually use the

component; If we are using a static file server, we should use the

component

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);
Copy the code

Routing matching

React-router-dom has two components that match routes :<Route> and <Switch>.

import { Route, Switch } from "react-router-dom";
Copy the code

Route matching is done by comparing the path property of the <Route> component with the pathName of the current location. When a <Route> matches, its corresponding component content is rendered. If they do not match, null is rendered. If a <Route> has no path attribute, its component content will always be rendered.

// When location = {pathName: '/about'}
<Route path='/about' component={About}/> // Path match successful, render 
       component
<Route path='/contact' component={Contact}/> // Paths do not match, render null
<Route component={Always}/> // This component has no path property and its corresponding 
       component is Always rendered
Copy the code

We can place a <Route> component anywhere in the component tree. But it is more common to write several < routes > together. The <Switch> component can be used to “wrap” multiple <Route> together.

It is not mandatory to use a <Switch> component when multiple components are used together, but it is very convenient to use a <Switch> component. <Switch> iterates through all <Route> subcomponents below it and renders only the <Route> that matches the first path.

<Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" Component ={About} /> <Route path="/contact" component={contact} /> {/* If none of the Route paths match, <NoMatch> is rendered. We can return 404 */} <Route Component ={NoMatch} /> </Switch>Copy the code

Route Rendering Props

<Route> The components that are displayed when matching can be written in three ways:

  • component
  • render
  • children

See the <Route> documentation for more details. Here we’ll briefly introduce the Component and Render methods.

component

With <Route>, if the content we want to render already has a corresponding component, we can use the Component method directly. Such as:

<Route path="/user/:username" component={User} />;

function User({ match }) {
  return <h1>Hello {match.params.username}!</h1>;
}
Copy the code

render

The Render method uses an inline function directly to render the content.

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>} / >Copy the code

Note:

Do not set the Component property to a function and then render the component inside it. This causes existing components to be uninstalled and then rewritten to create a new component rather than just updating the component.

const Home = () => <div>Home</div>; const App = () => { const someVariable = true; return ( <Switch> {/* these are good */} <Route exact path="/" component={Home} /> <Route path="/about" render={props =>  <About {... props} extra={someVariable} />} /> {/* do not do this */} <Route path="/contact" component={props => <Contact {... props} extra={someVariable} />} /> </Switch> ); };Copy the code

Navigation

The React Router provides a component for adding links to applications. When <Link> renders, a <a> tag is created in the HTML page.

<Link to="/">Home</Link>
// <a href='/'>Home</a>
Copy the code

The <NavLink> component is a special <Link> component. When its path matches the current location, you can customize its style to represent the current page location.

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>
Copy the code

The <Redirect> component can be used when page redirection is required. When a <Redirect> component is rendered, the page is rendered to the location specified by the <Redirect> component’s to property.

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>))} / >Copy the code