React Router V4 获取当前路径

Posted 2023-02-21

【中文标题】React Router V4 获取当前路径

【英文标题】：React Router V4 Get Current Path

【发布时间】：2018-11-03 18:51:14

【问题描述】：

如何使用 react router v4 获取当前路径？

我尝试了以下方法无济于事：

const currentLocation = this.props.location.pathname;

错误：Cannot read property 'pathname' of undefined

这是我的 Routes.js 文件：

import React, Component from 'react';
import   BrowserRouter as Router, Route, Switch  from 'react-router-dom';
import  Provider  from 'react-redux';
import configureStore from './Store';
import LevelOne from './containers/LevelOne';
import LevelTwo from './containers/LevelTwo';
import LevelThree from './containers/LevelThree';
import CreateProfile from './containers/Profile/CreateProfile';
import WhosWatching from './containers/Profile/WhosWatching';
import ProfileNameAvatar from './containers/Profile/ProfileNameAvatar';
import FavouriteGenres from './containers/Profile/FavouriteGenres';
import FourZeroFour from './containers/404';

import Header from './components/Header';

const store = configureStore();

const navItems = [
  
    title:"For You",
    to: "/for-you"
  ,
  
    title:"Movies",
    to: "/movies"
  ,
  
    title:"Series",
    to: "/series"
  ,
  
    title:"TV Shows",
    to: "/tv-Shows"
  ,
  
    title:"Subscriptions",
    to: "/subscriptions"
  ,
  
    title:"Live TV",
    to: "/live-tv"
  
]

export default class Routes extends Component 
  state = 
    theme: 'light'
  

  header = React.createRef();

  setTheme = (theme) => 
    this.setState(
      theme: theme,
    );
  

  render() 
    const currentLocation = this.props.location.pathname;
    console.log("location", currentLocation);
    return (
      <Provider store=store>
        <Router ref='router'>
          <div className='app'>
            /*<Header navItems=navItems theme=this.state.theme ref=this.header />*/
            <Switch>
              <Route exact path="/" render=(props) => (
                <LevelOne ...props setTheme=this.setTheme />
              )/>
              <Route exact path="/for-you" render=(props) => (
                <LevelTwo ...props setTheme=this.setTheme />
              )/>
              <Route exact path="/for-you/view-all" render=(props) => (
                <LevelThree ...props setTheme=this.setTheme innerRef=this.header />
              )/>
              <Route exact path="/profile/create-profile" render=(props) => (
                <CreateProfile ...props />
              )/>
              <Route exact path="/profile/whos-watching" render=(props) => (
                <WhosWatching ...props />
              )/>
              <Route exact path="/profile/profile-name-avatar" render=(props) => (
                <ProfileNameAvatar ...props />
              )/>
              <Route exact path="/profile/favourite-genres" render=(props) => (
                <FavouriteGenres ...props />
              )/>
              <Route component=FourZeroFour />
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  

【参考方案1】：

您只能在 Route 组件中访问 this.props.location（因为 prop 是从它传递给组件的）。

您可以在Router 之外使用window.location.pathname 获取当前路径，但如果您在此处访问该路径，您可能做错了什么。

对于Router 的子级，您可以通过将其包裹在withRouter 周围或从Route 组件向下传递道具来访问该位置。

Redux integration 还允许您从任何地方访问该位置。

【讨论】：

感谢@riwu - 正是我所追求的。

如果您希望使用键或名称等参考检索确切的路线，请查看***.com/a/59217492/1702919

如果你的组件在路由器之前并且不能在路由器内部怎么办？

【参考方案2】：

您可以直接从document 变量中获取路径。

例如：const path = document.location.pathname

【参考方案3】：

this.props.match.path 应该可以解决问题

【讨论】：

感谢您的回答，我用您的建议替换了 currentLocation 常量，但出现错误：无法读取未定义的属性“路径”

抱歉，我相信我的命令是在路由器组件内部使用的

【参考方案4】：

快速解决方案 在你的函数上创建一个变量：

var currentLocation = window.location.pathname;

然后在ul > li className=(currentLocation == '/' ? 'active' : '')

它适用于我，是一个快速的解决方案。

【讨论】：

它不会构建