我应该在哪里解析 ReactRouter <Route> 中的查询字符串以将解析后的值作为道具传递给它的渲染方法另一个组件

Question

我想使用 <Route> 渲染一个组件，并将一些道具传递给它渲染的组件。我希望这些道具来自查询字符串，但我正在努力找出正确的位置来实际解析查询。

假设我有以下 URL：

localhost:3000/privateRegistration?fullName=JohnBaker&accessKey=a4141sbgfsd

我也在使用 React-Router-Redux，这就是我的 routerReducer 在这个地址的样子：

const routerReducer = {
    location: {
        hash: "",
        pathname: "/privateRegistration",
        search: "?fullName=JohnBaker&accessKey=a4141sbgfsd",
    }
}

由于 React-Router V4 本身不解析查询字符串，我将使用节点 queryString 模块 (https://www.npmjs.com/package/querystring)

const querystring = require('querystring')
const {location} = state.routerReducer

render() {
    return (
        <Route path='/privateRegistration' render={ () => {

            const parsed = querystring.parse(location.search)

            return (
               <PrivateComponent
                fullName={parsed.fullName}
                accessKey={parsed.accessKey}
               />)}
        }/>
    )
}

除了 <Route> render prop/method 之外，还有其他地方我应该执行实际的解析操作吗？从技术上讲，我可以访问 Route 上下文之外的历史对象，但是如果我离开 Redux，我还能在哪里访问它？

我也可以简单地将整个 location.search 作为 prop 传递，或者更简单地通过 redux 存储在组件中访问它而不传递 props

我正在尝试查看最佳实践，但似乎存在关于最佳方法的争论：https://github.com/ReactTraining/react-router/issues/4410

Answer 1

在 Route 的 render 功能中，您几乎可以访问所有内容。您可以将它们传递给您的 PrivateComponent:

render() {
  return (
    <Route path='/privateRegistration' render={ props => 
        <PrivateComponent { ...props } />    // ^ HERE
    } />
  )

props 包括 history、location 和 match 对象，您可以使用它们执行任何操作。

我应该在哪里解析 ReactRouter <Route> 中的查询字符串以将解析后的值作为道具传递给它的渲染方法另一个组件

Where should I parse a Query String in ReactRouter <Route> to pass parsed values into its render method as props to another Component

url-routing

query-string

reactjs

react-router

react-router-redux