bautidea/react_router

Creating React Router from scratch

In this project im creating the library React Router from scratch with React, this made library is going to be published by npm so anyone who want can install it and import it in his projects.

Also im adding Tests and the '<Link>' component to perform SPA (Single Page Application).

In order to create React Router from scratch, this steps were followed:

1 - Create a way of doing MPA (Multi Page Applications), done this by using conditional rendering and a state, using this as a start point.

2 - Create a way of doing SPA (Single Page Applications), by creating a function to manipulate browser history. I add a new entry to the browser session by creating a custom even, that will be heard when a pages gets loaded (or page Component gets mounted).

3 - The event gets listened by a component called <Router>, this component will hear the Event dispatched in the previous step, and by using a state it will set the current path of the browser to the added entry.

4 - Exported Event creation and dispatch (step 2) to a Component called <Link>, that will "link" pages based on a specified endpoint.

5 - Added a default component in <Router> component, when an endpoint is not defined or found.

6 - Support routes with parameters, i've used 'path-to-regexp' module. In order to pass parameters through URL.

First we need to indicate in the URL that we are going to pass dynamic parameters, so when declaring the routes with its component we add expected parameters, like this.

Then we create the Page Component, declaring props.

if URL = 'url/search/123/pasta' -> routeParams = { id : '123', search : 'pasta' }

Finally <Router> Component will compare the current URL in browser against the routes declared in the above constant. If the URL contains '/search' then by using 'match' function in 'path-to-regexp' module, we obtain the dynamic parameters and pass it to the 'SearchPage' Component.

if URL = 'url/search/123/pasta' -> routeParams  = { id : '123', search : 'pasta' }

7 - Creating <Route> Component to pass routes to the <Router> Component. The way we pass props from Route to Router is by accessing to child props in Router.

<Route> is an empty component

Passing <Route> as children

Obtaining routes from <Router> Component childrens

8 - Adding Lazy Load to routes, by applying 'lazy' function from react, it lets us defer loading component code until it's rendered for the first time.

9 - Providing internalization for 'About' page, it can be displayed in spanish or english. Language can be selected by passing the parameter in the URL.

An object stores possible languages.

Hook to select Language

Displaying About Page in different languages.

10 - Testing the application using 'vitest'.

11 - Publishing the project as an NPM package to be used from any site, to do this:

Installed 'swc', a babel alternative that allows to compile file without a compiler.

Customized configuration to work obtained the default from here

Modified 'package.json' file, and added a 'prepare' value in the scripts key. This is a special script that will execute before publishing.