React Redux项目中如何将未匹配的/:user路由重定向至404页面

问题根源 #

你遇到的报错由两个问题共同导致：

1. 路由匹配顺序错误：Switch 组件遵循从上到下的优先匹配规则，你把动态路由 /:user 放在了 /404 固定路由之前，访问 /404 时会被优先识别为 user = '404'，永远不会触发后续的404路由和重定向逻辑。
2. 数据查询无兜底：当路径参数 user 不存在于Redux的data数组中时，Array.find 方法会返回 undefined，Main组件直接读取 props.prop.id 等空值属性就会触发报错。

修复方案 #

1. 调整App.js路由顺序 #

将固定路由放在动态路由之前，确保特殊路径不会被动态路由拦截：

import React from 'react';
import Main from "./Main"
import Navb from "./Navbar";
import Notfound from './Notfound';
import { BrowserRouter , Route , Switch , Redirect } from "react-router-dom"
class App extends React.Component {
  render() {  
    return (
      <BrowserRouter>
       <Navb />  
       <Switch>
         {/* 固定路由放前面 */}
         <Route path="/404" component={Notfound} />
         {/* 动态路由放后面 */}
         <Route path = "/:user" exact component = {Main} />
         {/* 全局重定向兜底 */}
         <Redirect from="*" to="/404" />
       </Switch>
      </BrowserRouter>
    )
  }
}
export default App;

2. 给Main组件加空值校验和跳转逻辑 #

查询不到对应user数据时直接重定向到404，避免空值报错：

import { connect } from "react-redux";
import {Link, Redirect} from "react-router-dom"
function Main(props) {
  // 空值直接跳转404
  if (!props.prop) {
    return <Redirect to="/404" />
  }
  function hello(){
      let id = props.prop.id;
      props.data(id);
  }
  return ( 
      <div className = "row">
                      <div className="col text-center mt-5 w-25 ms-5" key = {props.prop.id}>
                      <Link to={props.prop.path} className="text-danger lead">{props.prop.Name}</Link>
                      <p className="lead text-success mt-5">
                          {props.prop.text}               
                      </p>
                      <button className="btn btn-outline-danger" onClick={hello}>
                        Delete
                    </button>
                  </div>
      </div>
   );
}

const mapStateToProps = (state , ownparams) =>{
 let user = ownparams.match.params.user;
return{
    prop : state.sta.data.find(card => card.Name === user )
}
}
const mapDispatchToProps = (dispatch) =>{
    return{
        data :(id) => dispatch({ type : "hello" ,id })
    }
}
export default connect(mapStateToProps , mapDispatchToProps)(Main);

修复后访问任意不存在的路径都会直接跳转到404页面，不会再触发空值报错。

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