The way my routing is setup, the URL might be something like
localhost:3000/alpha/beta/gamma#4
When I use the location hook from react-router like follows:
let loc = useLocation();
useEffect(() => {
console.log(loc.pathname)
})
It will console log:
alpha/beta/gamma
and cut off the #4. How can I avoid this from happening and return the full URL?
useLocation() creates a location object property which contains the following:
hash
pathname
search
state
key
According to RFC 3986 the query string (search) should come before the fragment (hash).
If you want to get a full URL, you should get the pathname with loc.pathname. Then check for query params aka search with loc.search, then fragments aka hash with loc.hash and concatenate them together.
you need to read the [hash #] and [search] values from useLocation hook, try this :
import useLocation from "react-router-dom";
then inside your app
const { hash, search } = useLocation();
more about useLocation
i am having a hoc withAuth.js
in which i am passing a component and second parameter is current route which would render if the condtion fails
const Detail = (props) => {
return(
<>
<div> this is the my account inside ..... </div>
</>
)
};
export async function getServerSideProps({req ,res}) {
// Call an external API endpoint to get posts.
// You can use any data fetching library
// console.log('request object ', req.headers);
// retun the props.api bcoz client side has no access to the baseurl from the server
return {
props:{}
}
}
export default withAuth(Detail, loginRedirectPath);
my question is that how to pass the current route the hoc
edit
hi i have solve this problem by managing route history
I don't believe you need to actually pass this as a parameter, but you can if you so wish. As per the docs, you can use the useRouter() hook (or another method such as importing the Router object) to get the current pathname. I believe this will work on either the component or HOC when using the hook, although I may be wrong on this. Regardless, using next/router to get the pathname is the approach here!
I noticed that in all the examples provided by the React Router, it uses the Router objects as part of the UI that gets rendered. But I have a situation where I need to use the Redirect object outside of the rendering code. I have a set of tabs and when the user clicks on a tab, I need to redirect to a different url.
I came across one location in the Router documentation that did show how to use the Router object as part of the normal Javascript code that is not part of the rendering but I could not find it again. In essence I want to do something like this:
function doRedirect() {
return (<Redirect to={"/" + user.username + "/projects"} />);
}
But this will fail to compile. How can I use the Redirect functionality using the angled brackets inside of normal Javascript code?
You could use the useHistory hook, then just history.push(url) or history.replace(url) like this:
import { useHistory } from 'react-router-dom'
const MyComponent = ({ user }) => {
const history = useHistory()
function handleClick() {
history.replace(`/${user.username}/projects`)
}
return (
<button onClick={handleClick}>Redirect to Projects</button>
)
}
This is just an example, but obviously you can use this with quite a lot of flexibility.
See this question for push vs replace
I am trying to code search filter feature for table. I am using react-router-dom v4.
When user click search button, I want to navigate page from "/list" to "list?search=abc" by props.history.push(). (I already used RouteComponentProps and withRouter).
But I know react-router-dom v4 just changes url while it doesn't not refresh the page.
My colleague uses function componentWillReceiveProps in class component to detect query params changes. (now that function is known as getDerivedStateFromProps)
componentWillReceiveProps(nextProps) {
console.log("next Props");
if (nextProps.location.search !== this.props.location.search) {
let parsed = queryString.parse(nextProps.location.
this.loadData(parsed);
}
Using React Hook (with Typescript) in functional component is compulsory to me. I tried many ways but it didn't work.
Do you know the way to figure this issue out?
Thank you very much.
I found my solution, I use useEffect to detect query params search change
useEffect(() => {
console.log(`use effect set state search`);
const searchParams = new URLSearchParams(props.location.search); console.log(search params: ${searchParams});
const search = searchParams.get("search") || "";
console.log(search: ${search}); setState({ ...state, search: search });
loadData(search);
}, [props.location.search]);
How do I get the full URL from within a ReactJS component?
I'm thinking it should be something like this.props.location but it is undefined
window.location.href is what you're looking for.
If you need the full path of your URL, you can use vanilla Javascript:
window.location.href
To get just the path (minus domain name), you can use:
window.location.pathname
console.log(window.location.pathname); //yields: "/js" (where snippets run)
console.log(window.location.href); //yields: "https://stacksnippets.net/js"
Source: Location pathname Property - W3Schools
If you are not already using "react-router" you can install it using:
yarn add react-router
then in a React.Component within a "Route", you can call:
this.props.location.pathname
This returns the path, not including the domain name.
Thanks #abdulla-zulqarnain!
window.location.href is what you need. But also if you are using react router you might find useful checking out useLocation and useHistory hooks.
Both create an object with a pathname attribute you can read and are useful for a bunch of other stuff. Here's a youtube video explaining react router hooks
Both will give you what you need (without the domain name):
import { useHistory ,useLocation } from 'react-router-dom';
const location = useLocation()
location.pathname
const history = useHistory()
history.location.pathname
this.props.location is a react-router feature, you'll have to install if you want to use it.
Note: doesn't return the full url.
Plain JS :
window.location.href // Returns full path, with domain name
window.location.origin // returns window domain url Ex : "https://stackoverflow.com"
window.location.pathname // returns relative path, without domain name
Using react-router
this.props.location.pathname // returns relative path, without domain name
Using react Hook
const location = useLocation(); // React Hook
console.log(location.pathname); // returns relative path, without domain name
You are getting undefined because you probably have the components outside React Router.
Remember that you need to make sure that the component from which you are calling this.props.location is inside a <Route /> component such as this:
<Route path="/dashboard" component={Dashboard} />
Then inside the Dashboard component, you have access to this.props.location...
Just to add a little further documentation to this page - I have been struggling with this problem for a while.
As said above, the easiest way to get the URL is via window.location.href.
we can then extract parts of the URL through vanilla Javascript by using let urlElements = window.location.href.split('/')
We would then console.log(urlElements) to see the Array of elements produced by calling .split() on the URL.
Once you have found which index in the array you want to access, you can then assigned this to a variable
let urlElelement = (urlElements[0])
And now you can use the value of urlElement, which will be the specific part of your URL, wherever you want.
To get the current router instance or current location you have to create a Higher order component with withRouter from react-router-dom. otherwise, when you are trying to access this.props.location it will return undefined
Example
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class className extends Component {
render(){
return(
....
)
}
}
export default withRouter(className)
Read this I found the solution of React / NextJs. Because if we use directly used the window.location.href in react or nextjs it throw error like
Server Error
ReferenceError: window is not defined
import React, { useState, useEffect } from "react";
const Product = ({ product }) => {
const [pageURL, setPageURL] = useState(0);
useEffect(() => {
setPageURL(window.location.href);
})
return (
<div>
<h3>{pageURL}</h3>
</div>
);
};
Note:
https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:~:text=NextJS%20is%20a%20framework%20that,is%20not%20run%20in%20NodeJS.
As somebody else mentioned, first you need react-router package. But location object that it provides you with contains parsed url.
But if you want full url badly without accessing global variables, I believe the fastest way to do that would be
...
const getA = memoize(() => document.createElement('a'));
const getCleanA = () => Object.assign(getA(), { href: '' });
const MyComponent = ({ location }) => {
const { href } = Object.assign(getCleanA(), location);
...
href is the one containing a full url.
For memoize I usually use lodash, it's implemented that way mostly to avoid creating new element without necessity.
P.S.: Of course is you're not restricted by ancient browsers you might want to try new URL() thing, but basically entire situation is more or less pointless, because you access global variable in one or another way. So why not to use window.location.href instead?