时间戳

首页 > 解决方案 > 如何在 ReactJS 中获取当前路径

reactjs - 如何在 ReactJS 中获取当前路径

问题描述

我需要在路由更改时获取 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

任何想法，任何人？

标签： reactjs

解决方案

您正在重新定义location：

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

将其更改为其他内容。

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

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

编辑：

如果即使在这之后你得到错误，那么你的 react-router 版本可能不是最新的或者不是已经useLocation定义的。尝试以下操作：

  1. 删除react-router,react-router-dom从package.json

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

rm -rf node_modules/

  1. 再次尝试安装它们：

npm install react-router react-router-dom

  1. 重新运行应用程序：

npm start

编辑2：

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

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

因此，您将需要定义您渲染的 BrowserRouter。index.js.

查看这篇文章了解更多详情。

推荐阅读