📄 Directory Structure

• Server routing
• Client routing
• MPA and SPA
• React Router
• The Router components
  • BrowserRouter
  • HashRouter
  • Route
  • Switch
  • Routing hop
  • Routing Hook
• Integrated the React the Router

🔖 Demo

Like function components and class components, routes have two categories. One is a server route and the other is a client route.

Server routing

The request is sent to the server, and the server returns the corresponding page content. For example, the official website of Bytedance is www.bytedance.com

Its request returns a complete HTML document, which is an example of server-side routing. We send a request in the browser, and the server receives the request and returns the content of the corresponding page.

Client routing

Instead of sending the request to the server, the client code updates the page content. Take the official website of the Nuggets as an example: juejin.cn/

We see the initial page entry, still sending a request from the server, and then returning the full page.

But when we click “info,” it doesn’t send a new request to the server

But when we click “our products” on byte.com, we send a new request /products to the server.

In the browser we looked and found

If the little icon becomes an X and then a circle, the request is processed from the server and a full page process is returned.

If it’s a client route, this icon doesn’t show a refresh.

The concepts of MPA (multi-page application) and SPA (single page application) are introduced.

MPA and SPA

On the left is the server routing scenario, MPA-Multi Page Application. We request an application address, such as the root path of the application /, and the server will return the HTML page. And then when we go to another path, like home /home, that’s also handled by the server, and the server returns to another page.

This is the traditional multi-page application. Each page has a corresponding HTML, and each route change is processed by the server, and then the server returns the corresponding HTML page.

For client routing, the first time we request the root path/of the application, the server will process it and return an HTML, and then when we jump to another path, it won’t send it to the server, it will process it. There’s only one HTML in the whole process, and that’s what’s called a SPa-single Page Application.

Later, you may also encounter SSR(server-side Rendering) and CSR(client-side Rendering), so you need to distinguish between SSR(server-side Rendering) and CSR(client-side Rendering).

React Router

In our daily development, SPA is the most common way to organize front-end applications.

React Router provides several solutions for managing client routes under SPA.

The Router components

Common ones are as follows:

• BrowserRouter: according to the URLpathDo route Redirection
• HashRouter: according to the URLhashPart of the route jump

BrowserRouter

The path section changes when we click on the navigation bar.

See Demo for the complete code

HashRouter

If it’s a HashRouter, when we click on it, we’re going to be changing the part after the URL#, which is actually the hash part of the URL

In this case, the route is based on the Hash part of the change, and then to render the content of the relevant page.

This is the difference between BrowserRouter and HashRouter.

In everyday use, BrowserRouter is most commonly used, and HashRouter exists to be compatible with older browsers, because BrowserRouter implements history.push apis. Older browsers may not support these. So React provides a HashRouter as a downgrading solution.

Route

When the URL matches the path defined in Route, render the corresponding components, including props: Path and exact.

If you do not add exact to the home page, no matter which page you click, the url will be the corresponding tag and the content will be matched by the home.

To avoid this problem we use exact. When you add exact, components will only be rendered if they are exactly equal.

Switch

Is the Switch used in combination with Route in the example above. When the Route component matching the first routing rule in the Switch component is found, subsequent searches are stopped immediately.

Routing hop

Declarative component approach: Link

Imperative API calls: history.push

It’s going to render the A tag underneath.

Routing Hooks

Let’s look again at how to do route jumps through imperative apis.

• useHistory: Gets the history object
• useParams: Gets the route parameters

First, define a new Route in the Switch

    <Route path="/user/:username">
        <User />
    </Route>
Copy the code

Next, use useHistory in the Home component

    function Home() {
        const history = useHistory();
        return (
          <div>
              <h2>Home</h2>
              <button onClick={()= > {
                  history.push("/user/jason");
              }}>
                  Go User{" "}
              </button>
          </div>
        );
    }
Copy the code

Push (“/user/ Jason “). Jason is passed as the value of username into the user component of Route path=”/user/:username” in Switch.

Use useParams in the User component

    function User() {
        const params = useParams();
        const username = params.username;
        return <div>Welcome: {username}</div>;
    }
Copy the code

In the User component, we use the useParams API to get the parameters in the routing path, and then use params.username to get the values of the parameters passed in and render them here.

That’s what the useParms API is all about.

Integrated the React the Router

In a real case, integrate ReactRouter

The presenter is demo on Github

In this article, we will focus on directory structures in the field

The features in the directory indicate a function module, which can be either a page-level (a routing page represents a module) or a complex front-end page, a module within a page. For example, a notification module. In general, a feature is a small feature that is separated from different pages.

Under each small feature it contains all the business logic or code needed to develop the feature. What do we do if we have some common code that needs to be reused between features? We move it up to the same file as the Features folder.

For example, each component uses a navigation bar at the top of the Navbar. We put the Navbar component in the outermost components folder.

It is a component that is reused within Features. If it is a proprietary code within Features, we simply place it in the folder represented by Features, which is a common directory structure and organization for our developer applications.