React Routers

Routing allows us to move between different parts of react application when a user clicks an element (links, buttons, icons, images) within the application. In single-page apps, there is only one HTML page. we are reusing the same HTML page to render the different components based on navigation. At the core React Router conditionally renders certain components.

React router is a routing library built on top of react which is used to create routing in react apps.

To install the react-router library, run the following:

npm install --save react-router-dom

This package includes number of routes that we can use,

• routers, like <BrowserRouter> and <HashRouter>
• route matchers, like <Route> and <Switch>
• and navigation, like <Link>, <NavLink>, and <Redirect>

A <BrowserRouter> uses regular URL paths, this route requires your server to be configured correctly. Specifically, your web server needs to serve the same page at all URLs that are managed client-side by React Router.

ReactDOM.render(
 <BrowserRouter>
   <App />
 </BrowserRouter>,
  document.getElementById("root")
);

A <HashRouter> stores the current location in the hash portion of the URL, so the URL looks something like http://example.com/#/your/page. Since the hash is never sent to the server, this means that no special server configuration is needed.

Each router creates a history that it uses to keep track of the location and re-render the application whenever the location changes, React Router components rely on this history object being present. The BrowserRouter uses the HTML5 history API to keep the user interface in sync with the URL in the browser address bar.

Matchers

<Route/> is a component that renders the appropriate user interface when the current location matches the route’s path . The path is a prop on the route component that has the pathname that the route should take.

<Route path="/cart"/><Route path="/items/keyboards" render={(props) => (<KeyBoardShow {...props} items={this.props.items} />)}/>

The route is matched when the pathname is cart or the route that starts with cart. If we want exact match we could write it like this.

<Route exact path=”/cart” />

When the route matches, the React component renders to show the change in UI.

<Switch/> the component that is used to wrap multiple <Route/> components. The switch component will pick the first matched route.

<Switch>   <Route path="/items/accessories" render={(props) => (   <AccessoryShow {...props} items={this.props.items} />   )}/>   <Route path="/items/keyboards" render={(props) => (   <KeyBoardShow {...props} items={this.props.items} />   )}/>   Route path="/items/:id" render={(props) => (   <ItemShowPage {...props} items={this.props.items}/>   )}/></Switch>

<Link/> the component is used to navigate the different parts of an application. It is like an HTML anchor element, the main difference is that <Link/> does not reload the page rather changes the UI.

<Link to=”/items”>Items</Link>

The <NavLink> is a special type of <Link> that can style itself as “active” when its to prop matches the current location.

<NavLink to={/items/${this.props.item.id}}> <h2>{[this.props.item.name](<http://this.props.item.name/>)}</h2> </NavLink>

Resources: https://reactrouter.com/web/guides/primary-components

<NavLink to={/items/${this.props.item.id}}> <h2>{[this.props.item.name](<http://this.props.item.name/>)}</h2> </NavLink>

Resources: https://reactrouter.com/web/guides/primary-components