如何通过React Router传递props？使用Route渲染组件时无法传值

你遇到的问题根源是React Router v6 已完全移除 <Route> 的 render 属性，你之前的写法在v6环境下不会生效，导致组件无法接收任何props。

修正方案： #

1. 将所有使用 render 属性的 <Route> 替换为 element 属性，直接在 element 中渲染组件并传递自定义props。
2. 若需要路由相关功能（如页面跳转、获取路由参数），无需通过props传递，直接在子组件内使用React Router提供的专属hooks（useNavigate、useParams、useLocation等）即可。

修正后的完整代码： #

function App(){
  const [contactdata, setcontactdata] = useState(GetLocaldata());

  return (
    <div className="ui container App">
      <Router>
        <Header/>
        <Routes>
          {/* 直接在element中传递自定义props */}
          <Route path="/" element={<Contactlists Contact={contactdata} deletehandler={deletehandler} />} />
          <Route path="/add" element={<AddContact AddChangeHandler={AddChangeHandler} />} />
          <Route path="/de" element={<ContactDetail/>} />
        </Routes>
      </Router>
    </div>
  );
}

补充说明（路由功能替代方案）： #

如果子组件需要路由能力（比如跳转页面），在子组件内这样实现即可：

import { useNavigate } from 'react-router-dom';

function Contactlists(props) {
  const navigate = useNavigate();
  
  // 示例：点击跳转至详情页
  const goToDetail = () => {
    navigate('/de');
  };

  return (
    // 你的组件内容
  );
}

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