reactjs - 如何在 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;

所以我需要做的是:
对于每个 Route更改我需要更新 location 的值并进行条件渲染并将该值(路径)传递给 Homepage组件也作为 prop
任何想法，任何人？

Answer 1

您正在重新定义 location :

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

将其更改为其他内容。
而且您不需要仅为 useLocation 定义其他函数。你可以像这样使用它:

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

编辑:
如果即使在此之后你得到错误，那么你的 react-router 版本可能不是最新的或者不是具有 useLocation 的版本。定义。尝试以下操作:

删除 react-router , react-router-dom来自 package.json

删除 node_modules 以使缓存清晰:

rm -rf node_modules/

再次尝试安装它们:

npm install react-router react-router-dom

重新运行应用程序:

npm start 编辑 2:
检查 this issue告诉我们不能在将 BrowserRouter 放入树的同一组件中使用任何钩子(Hook)。
将您的 BrowserRouter 移出该组件。它可以进入 ReactDOM.render()
因此，您将需要定义您渲染的 BrowserRouter。 index.js .
查看 this post了解更多详情。