如何在 ReactJS 中获取当前路径

Question

我需要on route change获取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 的版本。尝试以下操作：

1. 从package.json中删除react-router、react-router-dom

2. 删除 node_modules 以使缓存清晰：

rm -rf node_modules/

1. 重新尝试安装它们：

npm install react-router react-router-dom

4. 重新运行应用程序：

npm start

编辑 2：

检查 this issue 告诉我们，我们不能在将 BrowserRouter 放入树的同一组件中使用任何钩子。

将您的 BrowserRouter 移出该组件。它可以进入 ReactDOM.render()

所以，你需要定义你渲染的 BrowserRouter。 index.js.

查看this post了解更多详情。