Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
import { RouteComponentProps } from 'react-router-dom';
const App = () => {
console.log(here i want to get information about my URL);
return (
<div className="main">
export default App;
–
Given that the RouteComponentProps is defined as this:
export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
history: H.History;
location: H.Location<S>;
match: match<Params>;
staticContext?: C;
You can then understand that the match I've extracted holds the url data for you to examine. So assuming your url is http://foo/your-component/bar
this.props: all properties including routing-related
this.props.match.params.param1: prints 'bar'
You can simply use react hooks, if you are using in functional components.
Code will be as below
import { useParams} from "react-router";
import { useLocation} from "react-router";
const App = () => {
let location = useLocation();
console.log(location); // for url location info
let params = useParams();
console.log(params ); // for params information
return (
<div className="main">
export default App;
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.