admin管理员组文章数量:1330564
I have some issue with React Router useLocation
and how to get the current pathname.
Here is what I'm doing :
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {useHistory, useLocation} from 'react-router-dom'
function Home(props) {
const [isHome, setIsHome] = useState(true);
const [isContents, setIsContents] = useState(false);
const [isUserProfile, setIsUserProfile] = useState(false);
let location = useLocation();
let history = useHistory();
console.log(location)
console.log(history)
function getCurrentLocation() {
}
function logout() {
const logger = fetch('/users/logout');
logger.then(logout => {
if (logout.ok) {
props.logout()
} else {
console.log('error', logout);
}
})
}
return (
<Router>
<div className={'container-fluid h-100'}>
<div className={'row'}>
<ul className={"nav nav-tabs"}>
<li className={"nav-item"}>
<Link to={'/home'}>1</Link>
</li>
<li className={"nav-item"}>
<Link to={'/contents'}>2</Link>
</li>
<li className={"nav-item"}>
<Link to={'/user'}>3</Link>
</li>
</ul>
</div>
<Switch>
<Route exact path={'/home'}>1</Route>
<Route path={'/contents'}>2</Route>
<Route path={'/user'}>3</Route>
</Switch>
</div>
</Router>
)
};
export default Home
I want to get the currentLocationPathName in order to apply some custom style.
When I make a console.log(location)
this is what I get back:
function useLocation() {
if (true) {
!(typeof useContext === "function") ? true ? Object(tiny_invariant__WEBPACK_IMPORTED_MODULE_6__["default"])(false, "You must use React >= 16.8 in order to use useLocation()") : undefined : void 0;
}
return useContext(context).location;
}
Here a screenshot for more informations:
error message
I want to better understand how to use these Hooks.
Thank you for your time.
Edit:
Thank you to @Dance2die for his answer and specially this remendation:
And also make sure Home is used under a tree of a router (e.g.) BrowserRouter) (child, grandchild, etc)
I did not put Home
under <Router></Router>
tree...
Now it's working good and I can get access to the location.pathname
.
I have some issue with React Router useLocation
and how to get the current pathname.
Here is what I'm doing :
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {useHistory, useLocation} from 'react-router-dom'
function Home(props) {
const [isHome, setIsHome] = useState(true);
const [isContents, setIsContents] = useState(false);
const [isUserProfile, setIsUserProfile] = useState(false);
let location = useLocation();
let history = useHistory();
console.log(location)
console.log(history)
function getCurrentLocation() {
}
function logout() {
const logger = fetch('/users/logout');
logger.then(logout => {
if (logout.ok) {
props.logout()
} else {
console.log('error', logout);
}
})
}
return (
<Router>
<div className={'container-fluid h-100'}>
<div className={'row'}>
<ul className={"nav nav-tabs"}>
<li className={"nav-item"}>
<Link to={'/home'}>1</Link>
</li>
<li className={"nav-item"}>
<Link to={'/contents'}>2</Link>
</li>
<li className={"nav-item"}>
<Link to={'/user'}>3</Link>
</li>
</ul>
</div>
<Switch>
<Route exact path={'/home'}>1</Route>
<Route path={'/contents'}>2</Route>
<Route path={'/user'}>3</Route>
</Switch>
</div>
</Router>
)
};
export default Home
I want to get the currentLocationPathName in order to apply some custom style.
When I make a console.log(location)
this is what I get back:
function useLocation() {
if (true) {
!(typeof useContext === "function") ? true ? Object(tiny_invariant__WEBPACK_IMPORTED_MODULE_6__["default"])(false, "You must use React >= 16.8 in order to use useLocation()") : undefined : void 0;
}
return useContext(context).location;
}
Here a screenshot for more informations:
error message
I want to better understand how to use these Hooks.
Thank you for your time.
Edit:
Thank you to @Dance2die for his answer and specially this remendation:
And also make sure Home is used under a tree of a router (e.g.) BrowserRouter) (child, grandchild, etc)
I did not put Home
under <Router></Router>
tree...
Now it's working good and I can get access to the location.pathname
.
1 Answer
Reset to default 5useHistory
and useLocation
are functions so you need to invoke them.
Instead of
let location = useLocation;
let history = useHistory
Invoke the hook functions.
本文标签:
javascriptHow to get location pathname with React Router v5 and Hooks in React v16131Stack Overflow
版权声明:本文标题:javascript - How to get location pathname with React Router v5 and Hooks in React v16.13.1? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人,
转载请联系作者并注明出处:http://www.betaflare.com/web/1742272963a2444653.html,
本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论