useParams allows us to grab any params from the current route at the time of invocation.For example, if we went to /:username/:post-title, we could grab the params username and post-title.These variables would store whatever we are currently routed to. When we click on Home, we get the following result logged to the console:Īnd when we click on Products, we get the following result:Ĭlearly, the pathname property of the object is the current active route. Now that we have separate pages, we can make use of a custom react-router-dom hook called useParams(). React Router will use the parameter as a wildcard and will match any route that contains that pattern. The URL param is a keyword prefaced with a colon. import React from "react" import Home from "./components/Home" import Header from "./components/Header" import Products from "./components/Products" import export default App Instead of making a route for each one, add a URL param to the current path. In the code example below, on line 9, we are logging the value of the location variable to the console. Our app below has two routes: / & /products. We can find out the currently active route using the useLocation hook.
If you still do not see location.pathname then you should use the decorator withRouter.
create-react-app).Afterward, install React Router and read the following React Router tutorial to get yourself aligned to what follows next.
Master the fundamentals of React Router in my blog post here. In react router 4 the current route is in - . A React tutorial which teaches you how to use Nested Routes with React Router 6.The code for this React Router v6 tutorial can be found over here.In order to get you started, create a new React project (e.g.