可选的反应路由器参数标记 GET 请求错误？答案

【问题标题】：Optional React Router Param Flagging GET request Error?可选的反应路由器参数标记 GET 请求错误？
【发布时间】：2020-01-15 08:05:18
【问题描述】：

编辑：发布了我如何解决这个问题的答案，而不是使用 react-router 可选参数。

由于某种原因，当我使用附加到 URL 的可选参数转到可选的 react-router 路由/url 时，我遇到了 GET 错误。我试图通过在 URL 中包含可选参数 SRC 来跟踪用户的来源。我已经尝试了 /ref=testing、/src=testing、/testing 作为 :referrer?他们可能会保存在 localStorage 中，但仍会引发控制台 GET 请求。

这是我的 App.js 的样子：

<Route exact path="/profile/user/:user/:referrer?" component={ ProfileById } />

:user 是 mongoose 结构中的用户 ID。 : 推荐人？是 src=(不管它是什么)

这是我对路由的 axios 请求：

export const getProfileByUserId = (user) => dispatch => {
dispatch(setProfileLoading());
axios.get(`/profile/user/${user}`)
    .then(res => 
        dispatch({
            type: GET_PROFILE,
            payload: res.data
        })    
    )
    .catch(err => 
        dispatch({
            type: GET_PROFILE,
            payload: null
        })   
    );
}

这是我运行 axios GET 请求的 componentDidMount() 内部的内容，然后还检查可选参数并将其存储在 localStorage 中。

componentDidMount() {
    if (this.props.match.params.user) {
        this.props.getProfileByUserId(this.props.match.params.user);
    }

    if (this.props.match.params.referrer) {
        let referrerString = this.props.match.params.referrer.split('=');
        localStorage.setItem('referrer', referrerString[1])
    }
}

当我加载路由时，假设它：/profile/user/20385h1058h385/ref=testing GET 错误出现为：404 Not found，然后说错误是 /ref=testing 好吧，如果它是一个可选参数而且我实际上并没有在这个可选参数上请求 GET，为什么会出现？

感谢任何帮助，谢谢！

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我无法让它与一个可选的参数路由一起工作，所以我继续做一个新的 URLSearchParams()，把它变成一个字符串，然后分割这个字符串来识别实际的搜索查询。适用于斜杠路径，例如：/?src=testing 以及附加到现有路径时。

这是我想出的：

if (this.props.location.search) {
        // Check to see if the search address has a location and search query param, if so save in localStorage for referrer source
        //console.log(this.props.location.search);
        let srcParams = new URLSearchParams(this.props.location.search);
        let srcString = srcParams.toString();
        let referrerString = srcString.split('=');
        localStorage.setItem('referrer', referrerString[1]);
    }

【讨论】：

【解决方案2】：

请在 URL 中仅附加 testing 而不是 ref=testing。在这种情况下，您的 URL 将是 /profile/user/20385h1058h385/testing

我们将: 用于必需参数，将:parameter_name? 用于可选参数。

例如：

<Route path="/login/:p1/:p2?" component={Login} />

这里p1是必填参数，p2是可选参数。

我们在 componentDidMount 方法中得到这些，就像你正在做的那样。

this.props.match.params.p1

【讨论】：

感谢您的回复。我已经尝试在 url 中删除 ref= 或 src= ，并且像你提到的那样做了 /testing 。我又试了一次，还是报 404 GET 错误。
你使用的是哪个版本的 react-router。请同时查看此帖子https://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter。到version3，传递参数的方式是一样的，但是version4以后的方式略有不同。
我正在使用 React Router V5。您知道导致 GET 错误的原因吗？
@Buckyx55，我今天用 V4 测试了它。它适用于可选参数和必需参数。您可能还有其他问题。