How to read the current URL in the react application

Question

I would like read and print the current URL in the react application. Right now i am using "window.location.pathname" to read the URL but would like to know if there is a better way or some react way to read the URL

if you are using router, you can look at this https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md — SGhaleb, Aug 23 '18 at 15:08

score 21 · Answer 1 · edited Jun 14 '23 at 00:34

21

Suppose the current URL is http://localhost:3000/question:

window.location.href

returns the href (URL) of the current page (http://localhost:3000/question)

window.location.hostname

returns the domain name of the web host (localhost)

window.location.host

returns localhost:3000

window.location.pathname

returns the path and filename of the current page (/question)

window.location.origin

returns http://localhost:3000

window.location.protocol

returns the web protocol used (http: or https:) (In this case returns http:)

window.location.port

returns 3000

edited Jun 14 '23 at 00:34

Jan Schultke

17,446
6
47
96

answered Aug 23 '18 at 15:11

Ashley Fernandes

1,179
10
18

1

Use `window.location.host` if you want the hostname with the port (e.g. `localhost:8080`), see https://stackoverflow.com/a/6549132/3253277 – Alexandre DuBreuil Jan 05 '21 at 10:38

score 4 · Answer 2 · answered Aug 23 '18 at 15:21

if you are using React Router and your component is rendered by a Route like below for example:

<Route exact path='/' component={HomeComponent}/>

that component will automatically receive three objects from Route named history , location and match respectively. by that you can find what you asked under location.pathname. more info here

if you still using react router and your component is not been rendered with Route , you need to use withRouter , which is a HOC and will give you history , location and match as props to your component. more info here

if you are not using react router you gonna need to use window.location.pathname or window.location.href or only location.pathname

score 1 · Answer 3 · answered Aug 23 '18 at 15:19

1

If you are using react router:

const currentRoute= this.props.location.pathname

else you can get this like:

const currentRoute= window.location.pathname

href will give you complete url.

answered Aug 23 '18 at 15:19

Sakhi Mansoor

7,832
5
22
37

KARTHIKEYAN.A · Answer 4 · 2021-07-12T14:20:06.680

We can get it from this.props using withRouter component from react-router-dom package in the following way by adding in the class

import React from 'react';

import { connect } from 'react-redux';
import { Switch, Route, withRouter } from 'react-router-dom';


class Application extends React.PureComponent {
  
  render() {
    console.log(this.props)
    this.props.location.pathname // we will get the pathname

    return (
      <div className='application'>
        {Hi}
      </div>
    );
  }
}


export default connect(mapStateToProps, actions)(withRouter(Application));

output:

score 0 · Answer 5 · edited Oct 07 '21 at 15:57

You can use the useParams hook to access values in your URL. When creating your routes in App.jsx you will specify the name of the input variable like this:

<Route 
   path="/search/:searchType/:module/:category/:search/:source"
   exact={true}
   component={yourComponent}
/>

Then you can use the useParams hook inside your component to access the variable values.

const {searchType, module, category, search, source} = useParams();

score 0 · Answer 6 · answered Dec 05 '22 at 05:35

if you using react js then use useLocation and useHistory hooks

import { useHistory ,useLocation } from 'react-router-dom';
const location = useLocation()
console.log(location.pathname)

const history = useHistory()
console.log(history.location.pathname)

How to read the current URL in the react application

6 Answers6

Linked