Question

如果您的应用中的网址可以更改（例如/profile/1和/profile/2，那么您如何从this.props.location.pathname访问该网址？

在我的Profile组件中，我有一个componentDidMount方法，如下所示：

componentDidMount () {
    if (this.props.location.pathname === 'profile/:id/') {
      console.log('is profile')
  } else {
      console.log('is not profile')
  }
}

当我在个人资料页面上时会返回is not profile。

我正在使用的项目使用react-redux-starter-kit作为基础（不确定是否有帮助），它使用react-router-v3。

Answer 1

if (this.props.location.pathname === 'profile/:id/')

这永远不会成为现实，因为:id是匹配器：

尝试：

if (this.props.match.params.id)

这样您就可以检查当前路线中是否有id参数。

https://jaketrent.com/post/access-route-params-react-router-v4/

Answer 2

你可以试试这个

import { matchPath } from 'react-router-dom';

if (matchPath(this.props.location.pathname, { path: 'profile/:id' })) {}

或者

this.props.match.path === 'profile/:id'

我不确定为什么Profile组件如果不是个人资料而被装载。

Answer 3

这并不是最好的方法，但它对我有用：

this.props.location.pathname === '/profile/' + this.props.params.id

Answer 4

使用React钩子，您可以执行以下操作

import {Route, useRouteMatch} from 'react-router-dom'

const App = () => {
    const match = useRouteMatch("match/this/route/:id")
    return (
        //suppose you dont want to show navbar in this route
        {match && match.path === 'match/this/route/:id' ? <SomeComponent/> : <Navbar/>}
    )}
//match.path check for the dynamic route match/this/route/:id

Answer 5

使用比赛道具获取动态路径

componentDidMount () {
  if (this.props.match.path === 'profile/:id') {
    console.log('is profile')
  } else {
    console.log('is not profile')
  }
}

请参阅此以获取更多信息react-redux-match

React中动态URL的this.props.location.pathname

5 个答案: