An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
react-router a quick guide
Dynamic routing is the type of routing used by react-router. Unlike static routing, this takes place at the moment our application is rendering. This is because react-router makes use of components to define its routes.
The components that are responsible for displaying the different paths always render. Sometimes they render a component and sometimes null, all depending on the location.
To define the different routes of our application, we can use the Route component. The function of this component is to choose what to render according to the current location identified in the path. This is the case we saw earlier, all Route components always render, but sometimes they render a component and other times they return null.
import React from 'react';import logo from './logo.svg';import { BrowserRouter, Switch, Route } from 'react-router-dom';import Principal from './pages/principal/principal';import Login from './pages/login/login';import './App.css';function App() { return ( <BrowserRouter> <Switch> <Route path="/principal" component={Principal} /> <Route path="/" component={Login} /> </Switch> </BrowserRouter> );}export default App;
The way that you can navigate in your application is using the Link component, this causes a redirect to a different route than the current one. The path to which it redirects us replaces the current location in the browser's history, here I present a little example.
import React, { Component } from 'react';import { Link } from 'react-router-dom';import './Layout.css';class Layout extends Component { render() { return ( <div className="Layout"> <div className="link-container"> <Link to="/page1" className="link">go page 1</Link> </div> <div className="link-container"> <Link to="/page2" className="link">go page 2</Link> </div> </div> ); }}export default NavBar;
I hope this will be helpful and thanks a lot for reading
Original Link: https://dev.to/sabrinasuarezarrieta/react-router-a-quick-guide-12oh
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To