如何根据请求路由中的参数实现条件路由？答案

【问题标题】：How do I achieve conditional routing based on the parameter in the requested route?如何根据请求路由中的参数实现条件路由？
【发布时间】：2020-05-06 19:19:42
【问题描述】：

我正在开发一个类似 React js 博客的网站，但在管理路线时遇到了一些麻烦。我的带有文章 URL 的页面是这样的：website/pages/3

我想在页面索引为 1 时重定向到主页，因为主页默认是第一个包含文章的页面。我的路由器看起来像这样：

<Router>
        <Switch>
          <Route exact path="/" render={() => <Page postsPerPage={3}/>} />
          <Route exact path="/Page/:activePage" render={() => <Page postsPerPage={3}/>} />
          <Route path="/Login" component={Login} />
          <PrivateRoute path="/AddPost" component={AddPost}  />
          <Route path="/:postLocation" component={Post}  />
        </Switch>
      </Router>

如果 activePage 为 1，我想将“/Page/:activePage”路由到路由“/”呈现的组件。因此组件将相同（页面），但路径会不同。

Router 中的条件渲染可以解决问题吗？如果可以，如何解决？我当时在想一些事情：

 <Route exact path="/Page/:activePage" render={() => 
         {
            let {activePage} = useParams()
            if (activePage == 1) return (<Redirect to="/"/>)
            else return(<Page  postsPerPage={3}/>) 
          } 
          }/>

但是 React 似乎对我在那里使用 useParams 不满意（有一个编译错误：React Hook "useParams" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react -钩子/钩子规则）

我用常数值 1 而不是 activePage 参数测试了 sn-p，它确实重定向，所以基本上让我有一个问题，即如何从路径中检索参数？

【问题讨论】：

听起来你应该在<Page> 组件中处理重定向，而不是内联渲染函数。
嗯。没想到这个，试试。谢谢！

标签： reactjs conditional-statements router

【解决方案1】：

本例中的渲染函数 render prop 函数可以访问与组件渲染 prop 相同的所有路由 prop（匹配、位置和历史记录）。所以你基本上可以做类似的事情。

 <Route exact path="/Page/:activePage" render={(props) => 
         {
            if (props.match.params.activePage == 1) return (<Redirect to="/"/>)
            else return(<Page  postsPerPage={3}/>) 
          } 
      }
/>

看看你上面的例子，我宁愿不重定向任何东西，而是将逻辑带到页面组件中。在提取 activePage 参数的 componentDidMount 或 useEffect 函数中。我将检查它是否为 1（或您选择使用的任何标记值）然后我执行将由 home 组件执行的逻辑，否则我将正常处理路由。例如，如果您提取它并在它不是 1 的情况下提取到后端，那么当它为 1 时，您可以从函数返回，它会像在主页上一样工作。或者，在检查之后，如果它是 1，你可以重定向回 '/'。

【讨论】：

【解决方案2】：

您可能应该在 Pages 组件中处理路由，或者如果您愿意，可以创建一个单独的组件来处理条件路由。

例如：

function Pages (props) {

    const {activePage} = useParams()

    return activePage === 1 ? <Redirect to='/' /> : (
<div>
Your Pages component content here
</div>

)
}

export default Pages;

或

function ConditionalRoutingComponent(props) {

    const {activePage} = useParams()

    return activePage === 1 ? <Redirect to='/' /> : <Page  postsPerPage={3}/>
}

export default ConditionalRoutingComponent;

希望对你有帮助

【讨论】：

【解决方案3】：

组件的render函数是通过match、history和location三个参数调用的。您可以使用它们来执行您尝试使用钩子执行的操作。

<Route ... render={({match}) => {
 if (match.params.activePage == 1) {
  doYourStuff()
 }
}}

【讨论】：