可选反应路由器参数标记获取请求错误？

Question

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

出于某种原因，当我使用附加到url的可选参数转到可选react router route/url时，我遇到了一个GET错误。我试图通过在url中包含可选参数SRC来跟踪用户的来源。我已经尝试了从/ref=testing、/src=testing、/testing到：referer？它们可能会保存在本地存储中，但仍然会引发控制台GET请求。

下面是my 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
        })   
    );
}

下面是我的componentDidMount（）中的内容，在这里我运行axios GET请求，然后检查可选参数并将其存储在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=测试GET错误出现为：404未找到，然后说错误是 /ref=测试如果它是一个可选参数，并且我实际上没有在这个可选参数上请求GET，它怎么上来了？

感谢您的帮助，谢谢！

Answer 1

我无法让它使用react可选参数路由，因此我只做了一个新的URLSearchParams（），将其生成一个字符串，然后拆分该字符串以标识实际的搜索查询。在斜杠路径上工作，如：/？src=测试，以及将其附加到现有路径时。

这是我想出来的：

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

Answer 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