You should also be able to use your browser's back button to return to the list and choose a different repository. You should see three links to choose from, each showing different GitHub repositories. If your React web application uses React Router for navigation and routing, you use the useLocation hook to get the location object that represents the current URL. Now save all your work, and go to in your browser. Please choose a repository from the list below. The final step is to modify List.js so that it points to more than one repository. I added a third one for baseURL to avoid the line getting too long to read easily.

That now does a triple interpolation: once for the :repo part of our URL, and again for the view mode that's currently selected, i.e. So, replace that existing ajax.get() call with this:ДЄjax.get(`$`) We used :repo inside our route, and React Router will automatically make that available to the Detail component as. Thanks to the magic of React Router, we can use the exact same technique with the name of the repository too. If you remember, that uses ES6 string interpolation so that the URL gets written as. In Detail.js look for this line inside the fetchFeed() method: Well, you'd be wrong: we have to change just one part of one line in order to make it work. Given how easy that step was, you're probably imagining there's lots of work to do in the Detail component. Sure, we still need to actually do something with the repository name, but it means the Detail component will now work for /detail/react, /detail/react-native and so on. Just by writing :repo in the URL, React Router will automatically pull out whatever text comes in that part of the URL, then pass it to the Detail component to act on.

And fortunately React Router makes it easy вЂ“ in fact it's just a matter of rewriting your routes to this: Wouldn't it be much better if we could write any link like /detail/? and have our Detail component figure out what that means? Sure it would. That's certainly a possibility, but it's neither flexible or scalable. You might very well think we just need to extend that like so:

We currently have these two routes defined in index.js: Specifically, we want users to be able to choose between React, React Native and Jest in the List component, then load the correct Detail component for each of those. So far we've been working with the React repository on GitHub, but now it's time we started using different repositories as well. Making Custom URLs with React Router Params

React router dom url params