React Router V4 获取当前路径 [英] React Router V4 Get Current Path

问题描述

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

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

const currentLocation = this.props.location.pathname;

错误:无法读取未定义的属性路径名"

这是我的 Routes.js 文件:

import React, {Component} from 'react';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';从'react-redux'导入{提供者}；从 './Store' 导入 configureStore;从 './containers/LevelOne' 导入 LevelOne；从'./containers/LevelTwo'导入LevelTwo；从'./containers/LevelThree'导入LevelThree；从 './containers/Profile/CreateProfile' 导入 CreateProfile；从'./containers/Profile/WhosWatching'导入WhosWatching；从 './containers/Profile/ProfileNameAvatar' 导入 ProfileNameAvatar；从'./containers/Profile/FavouriteGenres'导入FavouriteGenres；从 './containers/404' 导入 FourZeroFour；从'./components/Header'导入标题；const store = configureStore();const navItems = [{title:"为你",到:/为你"},{title:"电影",到:/电影"},{title:"系列",到:/系列"},{title:"电视剧",到:/电视节目"},{title:"订阅",到:/订阅"},{title:"直播电视",到:/直播电视"}]导出默认类路由扩展组件{状态 = {主题:光"}header = React.createRef();setTheme =(主题)=>{this.setState({主题:主题，});}使成为() {const currentLocation = this.props.location.pathname;console.log("location", currentLocation);返回 (<提供者商店={商店}><Router ref='router'>
{/*<Header navItems={navItems} theme={this.state.theme} ref={this.header}/>*/}<开关><路由精确路径="/" render={(props) =>(<LevelOne {...props} setTheme={this.setTheme}/>)}/><路由精确路径="/for-you" render={(props) =>(<LevelTwo {...props} setTheme={this.setTheme}/>)}/><路由精确路径="/for-you/view-all" render={(props) =>(<LevelThree {...props} setTheme={this.setTheme} innerRef={this.header}/>)}/><路由精确路径="/profile/create-profile" render={(props) =>(<CreateProfile {...props}/>)}/><路由精确路径="/profile/whos-watching" render={(props) =>(<WhosWatching {...props}/>)}/><路由精确路径="/profile/profile-name-avatar" render={(props) =>(<ProfileNameAvatar {...props}/>)}/><路由精确路径="/profile/favourite-genres" render={(props) =>(<FavouriteGenres {...props}/>)}/><路由组件={FourZeroFour}/></开关>
</路由器></提供者>);}}

解决方案

您将只能访问 Route 组件中的 this.props.location(作为 prop从它传递给组件)

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

对于 Router 的孩子，您可以通过将其包裹在 withRouter 或从 Route 组件向下传递 prop.

Redux 集成 还允许您访问从任何地方的位置.

How can I get the current path using react router v4?

I have tried the following to no avail:

const currentLocation = this.props.location.pathname;

Error: Cannot read property 'pathname' of undefined

Here is my Routes.js file:

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>
    );
  }
}

解决方案

You will only have access to this.props.location in a Route component (as the prop is passed to the component from it).

You can get the current path with window.location.pathname outside of the Router, though it's likely that you are doing something wrong if you are accessing the path here.

For children of Router, you can access the location by wrapping it around withRouter or pass the prop downwards from a Route component.

Redux integration will also allow you to access the location from anywhere.

这篇关于React Router V4 获取当前路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！