Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
246 views

React Router: Jogesh K. Muppala

React Router is a collection of navigational components that enables routing among views in a React web application using browser-based URLs. It includes router components to set up routing, route matching components like <Route> and <Switch> to match routes, and navigation components like <Link> and <NavLink> to enable navigation between views.

Uploaded by

Alejandro Vallejo Parra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
246 views

React Router: Jogesh K. Muppala

React Router is a collection of navigational components that enables routing among views in a React web application using browser-based URLs. It includes router components to set up routing, route matching components like <Route> and <Switch> to match routes, and navigation components like <Link> and <NavLink> to enable navigation between views.

Uploaded by

Alejandro Vallejo Parra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

React Router

Jogesh K. Muppala
React Router
• Collection of navigational components
– Enables navigation among views
– Router components, route matching components and
navigation components
• Uses a browser-based bookmarkable URLs as an instruction
to navigate to a client-generated view in your web app
– Can also pass along optional parameters

2
Web App Routing
• Install react-router-dom
• Router component: <BrowserRouter>
– Creates specialized history object
– Also <HashRouter> if you are using a static file server
– Enclose your app in BrowserRouter

3
Route Matching
• Route matching components: <Route> and <Switch>
– <Route>’s path prop enables specification of the current location’s
pathname
– <Route>’s component prop specifies the corresponding view for the
location
– Using exact attribute ensures that the path must be exactly matched
– <Redirect> enables the default route specification
– <Switch> enables grouping together several routes
• Will iterate over all its children and find the first one that matches the path

4
Navigation
• Navigation is supported through the <Link>
and <NavLink> components:
– <Link> creates links in your application
• Will render as <a> in the HTML
– <NavLink> also attaches the active class to the link
when its prop matches the current location

You might also like