Question

我正在尝试修复应用程序中的一个问题，即当用户未在URL中输入所有路由参数时，我需要修改URL。这是我的路由器的样子：

<Switch>
    <Route path="/A" exact strict component={T3} />
    <Route path="/B" exact strict component={BestOf} />
    <Route path="/C/:id" component={Author} />
    <Route path="/D" exact strict component={About} />
    <Route path="/E" exact strict component={ContactUs} />
    <Route path="/F/:id/:subId" exact strict component={Careers} />
    <Redirect to="/"
</Switch>

会发生什么：如果我在URL栏http://localhost:3000/F/1中输入，该应用程序将重定向到/。

我想要的是：我想将此类URL更改为http://localhost:3000/F/1/0

我尝试在Switch内使用另一个Switch来处理此问题，但没有得到预期的结果。

任何帮助将不胜感激。预先感谢。

Answer 1

可能要做的是使url参数成为可选参数，并在Careers组件中将其重定向到有效的默认url

<Switch>
    <Route path="/A" exact strict component={T3} />
    <Route path="/B" exact strict component={BestOf} />
    <Route path="/C/:id" component={Author} />
    <Route path="/D" exact strict component={About} />
    <Route path="/E" exact strict component={ContactUs} />
    <Route path="/F/:id?/:subId?" exact strict component={Careers} />
    <Redirect to="/" />
</Switch>

现在在Careers组件中呈现方法

render() {
     const { match: { params }} = this.props;
     if (!params.id || !params.subId ) {
        return <Redirect to=`${match.url}/0/0` />
     }
     // rest code here
}

如果未传递所有参数，则React Router修改URL

1 个答案: