CODEWITHSUNDEEP
javascriptreactjs
Phani
Phani

Reputation: 309

How to read the current URL in the react application

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

Upvotes: 8

Views: 47067

Answers (6)

Ashley Fernandes
Ashley Fernandes

Reputation: 1207

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

Upvotes: 23

Deepak Singh
Deepak Singh

Reputation: 1145

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)

Upvotes: 0

Peter Anderson
Peter Anderson

Reputation: 21

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();

Upvotes: 0

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20098

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:

enter image description here

Upvotes: 0

amdev
amdev

Reputation: 7442

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

Upvotes: 4

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

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.

Upvotes: 1

Related Questions