Question

我正在尝试在我的网址中传递参数，但我在阅读时遇到问题。我正在使用react-router v4。

网址 http://localhost:3000/reset?token=123 我试着这样读它：

<Route
   path="/reset?token=:token"
   component={Reset}/>

但这会打印空对象console.log(this.props.match.params);。有什么奇怪的我试图将问号改成其他角色，看起来它解决了我的问题，但无论如何我想保留问号。

网址 http://localhost:3000/reset_token=123

<Route
   path="/reset_token=:token"
   component={Reset}/>

这已经有效console.log(this.props.match.params);。任何想法如何使问号工作也正确吗？对我来说非常重要的是继续使用react-router而不使用任何外部库。

干杯，丹尼尔

Answer 1

我如何解决这个问题。

http://localhost:3000?token=mypetismissing

export default function ({ location }) {
  const urlParams = new URLSearchParams(location.search);
  const token = urlParams.get('token');
  console.log(myParams)

  return (
    <div>
      {token}
    </div>
  )
}

Answer 2

您需要query-string

示例： http://yoursite.com/page?search=hello

const queryString = require('query-string')

class ProductsPage extends React.Component {
  componentDidMount() {
    let search = queryString.parse(this.props.location.search).search
    console.log(search) // ==> hello
  }

...
}

里面的问号反应路由器路径

2 个答案: