如何使用反应路由器 v4 获取当前路径？
我尝试了以下方法无济于事：
const currentLocation = this.props.location.pathname;
错误：Cannot read property 'pathname' of undefined
这是我的路线.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>
);
}
}
您只能访问Route组件中的this.props.location(因为prop从它传递给组件(。
您可以使用Router之外的window.location.pathname获取当前路径，尽管如果您在此处访问路径，则可能是做错了什么。
对于Router子项，您可以通过将其缠绕在withRouter上或将道具从Route组件向下传递来访问该位置。
Redux 集成还允许您从任何地方访问该位置。
快速解决方案
在函数上创建一个变量：
var currentLocation = window.location.pathname;
然后在ul > li className={(currentLocation == '/' ? 'active' : '')}
它对我有用，是一个快速的解决方案。
>this.props.match.path应该可以解决问题
您可以直接从document变量中获取路径。
例如：const path = document.location.pathname