相关疑难解决方法(0)

是否有一种无插件的方式通过jQuery(或没有)检索查询字符串值？

如果是这样,怎么样？如果没有,是否有插件可以这样做？

我在客户端使用react和react-router作为我的应用程序.我似乎无法弄清楚如何从网址获取以下查询参数:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

我的路线看起来像这样(我知道路径是完全错误的):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

我的路线工作正常,但我不知道如何格式化路径以获取我想要的参数.感谢任何帮助!

我在我的项目中使用react-router-dom 4.0.0-beta.6.我有一个如下代码:

<Route exact path="/home" component={HomePage}/>

我想在HomePage组件中获取查询参数.我找到了location.searchparam,看起来像这样:?key=value所以它是未解析的.

使用react-router v4获取查询参数的正确方法是什么？

在react-router v3中我可以访问它props.location.query.foo(如果当前位置是?foo=bar)

在react-router-dom@4.0.0 props.location只有props.location.search一个字符串就像?foo=bar&other=thing.

也许我需要手动解析和解构该字符串以找到foo或的值other.

屏幕截图console.log(this.props): (注意从?artist=band这里我想得到的值是从artist哪个值band)

我有一个在路由上加载的React组件

我需要从组件构造函数中的url访问参数

我该怎么做？

我可以这样访问吗：

class CustomCoponent extends React.Component {
    constructor(props,{match}) {
    }
}

这是一个快速的问题，但到目前为止我还没有找到解决方案：

我想使用render方法使用react-router v4访问URL参数。到目前为止，我发现的所有内容都只是通过了这样的组件：

<Route path="/:id" component={Child} />

但是我想使用如下的render方法：

<Route path="/:id" render={() => (<Wrapper> <Child /> </Wrapper>)} />

但是，match当我尝试在组件中访问id参数时，prop是未定义的。props.match.params.idChild

知道如何使用渲染功能并仍然访问url参数吗？

这可能听起来很垃圾，但是我应该如何读取 URL 并从 React JS 中的 URL 获取其值。有人告诉我使用 QueryString 来处理 GET 参数。

Url 外观具有以下结构：

localhost/test?id=xxx&value=yyyy

在组件类中，我使用以下代码：

class test extends Component {

  func() {
    const params = queryString.parse(location.search);

     //here I get: {?id=xxx&value=yyyy}
  }
}

问号标志怎么也被收回了？以及如何修复它，以便我能够在不制作太多的情况下获得这些值？

当我使用此代码从 url 路径获取 id 时（http://127.0.0.1:8083/#/zhuolian/activity/detail/1：

import { useParams } from "react-router-dom";\n\n\n  handleSearchInfo = () => {\n    const {id} = useParams();\n\n    const { dispatch } = this.props;\n    dispatch({\n      type: 'activityM/getActivityDetail',\n      payload: { pageSize: 10, pageNum: 1 ,id: id},\n    });\n  };\n

显示这样的错误：

TypeError: (0 , _reactRouterDom.useParams) is not a function\nTableList._this.handleSearchInfo\nsrc/pages/xRepo/Activity/detail.js:166\n  163 |   }\n  164 | ];\n  165 | \n> 166 | handleSearchInfo = () => {\n      | ^  167 |   const {id} = useParams();\n  168 | \n …

我是反应的新手，甚至是反应路由器的新手，我创建了一个反应应用程序，其中包含一些路线，但有些路线需要相同的数据（道具）。我想在当前页面上按下按钮时通过 onClickEvent 传输这些道具。我读到了一些尝试，例如将按钮上的 onClick 侦听器绑定到类似的方法

handleOnClick(){    
  this.props.history.push('/booking')
 ))

重定向到名为“预订”的路线。但是如何将当前页面的单个道具或整套道具传递给这个新页面？对此有什么解决方案，我如何访问重定向路线上的道具？

这是我的 Index.js，很快会添加更多路由：

const routing = (
 <Router>
   <div>
    <Route exact path="/" component={App} />
     <Route path="/booked" component={Booked} />
   </div>
 </Router>
 );

ReactDOM.render(routing, document.getElementById("root"));

路由树应如下所示： 我的 App.js 中有一个主视图，用于呈现 BookingItems 的组件。在 Bookingitem 中，我有多个道具。当我预订一些项目时，我应该被重定向到我的 Booked.js 组件。

在任何 BookingItems 中，我都有一个按钮，它应该重定向到 Booked.js。

预订项目：

onButtonClick() {
  this.props.history.push("/booked");
 }

render(){
 return(
          <div className="alignCenterDiv">
            <button
              onClick={this.onButtonClick.bind(this)}
              align="center"
              className="buttonBooking"
            >
              Buchen
            </button>
          </div>
)}

预订：在这里，我想访问我在 BookingItems 中或我在预订项目中创建的任何道具以将其传递给 Booked。

我正在尝试基于应获取URL参数（id）的react-router-dom路由加载详细信息视图，并使用该参数进一步填充组件。

我的路线看起来很像，/task/:id并且我的组件加载正常，直到我尝试像这样从URL抓取：id为止：

    import React from "react";
    import { useParams } from "react-router-dom";

    class TaskDetail extends React.Component {
        componentDidMount() {
            let { id } = useParams();
            this.fetchData(id);
        }

        fetchData = id => {
            // ...
        };

        render() {
            return <div>Yo</div>;
        }
    }

export default TaskDetail;

这会触发以下错误，我不确定在哪里正确实现useParams（）。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

该文档仅显示基于功能组件的示例，而不是基于类的示例。

感谢您的帮助，我是新来的人。