22 febrero, 2024

Static navigation and dynamic navigation

Once we have created the different pages of our application, whether they are stylized or not, It’s a good idea to start thinking about how the user will explore our project. We call this exploration navigation and it refers to the different routes by which a user moves from page to page. In this post, we will teach you the difference between static navigation and dynamic navigation so you can decide which one to apply in your projects.

What is static navigation and dynamic navigation?

As you have read in our posts about what React Router is and what the React Router library is for, a fundamental step in developing an application is declaring navigation routes. There are two ways to declare these routes known as static navigation and dynamic navigation.

You may have seen in programming courses backend that, in the process of developing projects, We can declare a series of exploration paths for our application. Within our code, we assign each one a manager role, also known as a controller. In this way, when we design our API, we can define what code to execute when a call is received to a certain endpoint. This way of declaring and structuring routes, widely used in express projects, is static navigation. Because?

The difference between static navigation and dynamic navigation is mainly based on the time when routes are declared. When we define routes when designing our API, we are declaring routes at initialization. That is to say, A certain number of paths are declared before any rendering is executed. This way of declaring routes is called static because a certain number has been defined. In this sense, it becomes complex to change the number of routes at runtime.

The React Router library suggests using the other route declaration method: dynamic navigation. By comparing the concepts of static navigation and dynamic navigation we will see that, in the latter method, he routing It happens while the application is rendering, not before.

This may sound confusing, since React Router allows us associate components with routes in a static way within our code. However, React Router allows us to use static navigation and dynamic navigation at the same time. Thus, At any point in our application we will be able to create subroutes, links and redirect our routes. That is, we will not be so tied to what we have defined in the beginning.

So we can say that he routing o declaration of routes with React Router happens while the application is rendering. This is because in React Router basically everything is React components. These components allow us to easily modify paths in the rendering process.

Below, we briefly present the main components of React Router and their functions:

BrowserRouter: this component wraps the entire application. To do this, use history API. You can learn more about this API in the MDN post titled Manipulating browser history.Link, NavLink: This component allows us to create links for declarative navigation. Route: renders a component when it does matches with the URL. If you don’t find this matches, the component Route render null.Switch: renders the first it makes match.

If you want to know more in depth what each of these components is and how it works, we invite you to read our post on main components of React Router. Additionally, on our blog you can read other articles about this bookstore. how to apply React Router to a React application and declare routes with React Router.

We also suggest reading the official React Router documentation at reactrouter.com.

Do you want to continue learning?

After reading this post, now Do you know the difference between static navigation and dynamic navigation? and how to apply them in your React programming projects. However, there is still a lot to learn to master the world of web development. For this reason, we invite you to our Full Stack Web Development Bootcamp, an intensive program where You will learn to develop with programming languages ​​such as JavaScript, HTML and CSS. Do you want to continue learning with us? Enroll now!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *