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;
you need the full url like http://yoururl.com/home or you need only /home ? 2nd one you can get it by this.props.location.pathname tareq aziz Nov 29, 2019 at 8:35

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.