Question

我有这个App.jsx可以路由（提供）不同的组件。

但是我已经在<NavigationBar />和h1之间设置了Router和一个Switch标签，因为我需要为每个页面渲染这两个组件。

所以现在我想要的是获取显示在浏览器地址栏上的当前路由名称/路径名称。当我单击不同的链接（Link）来呈现不同的组件时，此路径正在改变。

但是，即使每次/点击都改变路径，路径值仍为Link。我什至使用了componentDidUpdate，但由于它给出了错误，所以没有用

最大更新深度超过componentdidupdate

这是我的App.jsx

import React, { Component } from "react";
import "./App.css";
import "./css/custom.css";

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

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

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPath: "",
    };
  }


  componentDidMount() {
    this.setState({
      currentPath: window.location.pathname,
    });
  }

  render() {
    return (
      <Router>
        {/* --------------- Navigation Bar --------------- */}
        <NavigationBar />
        <h1>Path is: {this.state.currentPath}</h1>
        {/* --------------- End of Navigation Bar --------------- */}
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/post" component={Post} />
        </Switch>
      </Router>
    );
  }
}

export default App;

即使随着路径更改呈现了不同的组件，this.state.currentPath的值也不会更新。

有人可以帮忙吗？

Answer 1

useLocation挂钩提供了当前位置：

function NavigationHeader() {
    const location = useLocation();
    return <h1>Path is: {location.pathname}</h1>;
}

如何在路由更改时获取React路由器路径

1 个答案: