如何在ReactJS中获取当前路径

Question

我需要得到当前路径的url在路由更改和基于值我想做条件渲染

这是我的代码，我没有继续的想法。

import React, { useRef, useEffect, useState } from "react";
import "./App.css";
import "./css/custom.css";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation,
} from "react-router-dom";

import NavigationBar from "./pages/homepage-components/1-navbar";
import HomePage from "./pages/HomePage";
import Post from "./pages/Post";

function NavigationHeader() {
  const location = useLocation();
  return location.pathname;
}

function App() {
  const [location, setLocation] = useState("");

  const mounted = useRef();
  useEffect(() => {
    if (!mounted.current) {
      // do componentDidMount logic
      let val = NavigationHeader; // this part return the function, even tried NavigationHeader(), but no luck
      alert(val);
      mounted.current = true;
    } else {
      // do componentDidUpdate logic
    }
  });

  return (
    <Router>
      {/* --------------- Navigation Bar --------------- */}
      {location === "/" ? <NavigationBar /> : null}
      

      {/* --------------- End of Navigation Bar --------------- */}
      <Switch>
        <Route exact path="/" component={() => <HomePage isroot={location} />} />
        <Route path="/post" component={Post} />
      </Switch>
    </Router>
  );
}

export default App;

所以我需要做的是：

对于每个路线更改，我需要更新位置的值，并进行条件渲染，并将该值（路径）作为道具也传递到主页组件

有什么想法吗？




Answer 1

匿名用户

您正在重新定义位置：

const [location, setLocation] = useState("");
// ---^^^^^

把它换成别的东西。

您不需要仅为useLocation定义其他函数。您可以像这样使用它：

function App() {
  const location = useLocation()
  // ...
  useEffect(() => {
    console.log(location.pathname)
  }, [location])

编辑：

如果即使在这之后，你得到了错误，那么可能你的反应路由器版本不是最新的，或者不是定义了usePlace的版本。尝试以下内容：

>

从package.json

删除节点_模块以提高缓存清晰度：

rm-rf节点\u模块/

npm安装react路由器react路由器dom

npm启动

编辑2：

检查这个问题告诉我们，我们不能在将BrowserRouter放入树的同一组件中使用任何挂钩。

将BrowserRouter移出该组件。它可以放在ReactDOM.render（）中

因此，您需要在渲染ie的位置定义BrowserRouter。index.js。

查看此帖子了解更多详细信息。