React Router v5如何禁止无查询参数直接访问/search搜索路由

你之前的逻辑不生效是三个错误导致的：

• 变量作用域搞错：你声明的是局部变量value，判断时却读取实例属性this.value，两者完全不相关，条件永远不会触发
• 判断逻辑覆盖不全：无查询参数时queryString.parse(location.search)返回空对象，序列化后是字符串'{}'，既不是空串也不是null，根本进不了你写的判断分支
• 路由匹配逻辑写错：React Router v5的path规则只匹配域名后的路径段，完全不感知?后面的查询参数，你在path里写/search?q=xxx的形式永远匹配不到任何路由。

优先选路由层拦截的方案，不用等组件挂载就能完成跳转，性能更好。

方案1：路由层直接校验（推荐） #

直接在/search路由的render回调里完成参数校验，不合法直接重定向，合法再渲染搜索结果组件：

import { Route, Redirect } from 'react-router-dom';
import queryString from 'query-string';

<Route 
  path="/search" 
  render={({ location }) => {
    // 解析URL查询参数，q替换成你实际使用的搜索参数名即可
    const queryParams = queryString.parse(location.search);
    // 校验规则：必须存在非空的搜索参数
    const isValidSearch = queryParams.q && queryParams.q.trim().length > 0;

    if (!isValidSearch) {
      return <Redirect to="/" />;
    }

    // 参数合法才渲染搜索结果
    return (
      <ReactiveList
        componentId="SearchResult"
        dataField="ratings"
        pagination={false}
        paginationAt="bottom"
        pages={5}
        sortBy="desc"
        size={10}
        loader="Loading Results.."
        showResultStats={true}
        renderItem={res => <div>{res.title}</div>}
        renderResultStats={function(stats) {
          return `Showing ${stats.displayedResults} of total ${stats.numberOfResults} in ${stats.time} ms`;
        }}
        react={{
          and: ['CitySensor', 'SearchSensor'],
        }}
      />
    );
  }}
/>

方案2：组件内部校验 #

如果你更习惯把校验逻辑放在类组件内部，修正原有逻辑的错误即可：

import { Component } from 'react';
import { Redirect } from 'react-router-dom';
import queryString from 'query-string';

class SearchPage extends Component {
  render() {
    const { location } = this.props;
    const queryParams = queryString.parse(location.search);
    // 替换成你实际需要校验的搜索参数名
    const isValidSearch = queryParams.q && queryParams.q.trim().length > 0;

    if (!isValidSearch) {
      return <Redirect to="/" />;
    }

    return (
      {/* 你的ReactiveList及其他搜索页组件 */}
    );
  }
}

// 路由配置直接挂载组件即可，React Router会自动注入location等props
<Route path="/search" component={SearchPage} />

• 如果你开启了ReactiveSearch的URL参数持久化，校验的参数名要和搜索组件配置的URL参数字段保持一致，避免误判合法搜索请求
• 不要尝试在path属性里写查询参数匹配规则，React Router不对查询参数做路径匹配，所有查询参数的判断都要在渲染逻辑里单独解析处理
• 你之前写的判断条件this.value === '' || null本身存在逻辑错误，该表达式实际等价于(this.value === '') || null，永远不会返回布尔值true，哪怕变量值符合预期也无法正确触发分支。

内容的提问来源于stack exchange，提问作者user3125823