react路由器路径中的问号

Question

我正在尝试在我的URL中传递参数，但我的阅读有问题。我正在使用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}/>

这已经工作了< code > console . log(this . props . match . params)；。有没有办法让问号也正确？对我来说，真正重要的是继续使用react-router，而不使用任何外部库。

干杯，丹尼尔

Answer 1

将路径更改为“/reset”。这将使页面呈现的令牌仍在url中，您将能够获取该令牌。快乐编码:)

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

Answer 2

您需要查询字符串

例如: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
  }

...
}

Answer 3

我是如何解决这个问题的。

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