React Router v6嵌套路由中ProdDetails组件不加载的原因排查

问题描述 #

在React Router v6中，将ProdDetails组件作为嵌套路由（路径products/:id）配置后，地址栏URL能正常变化，但界面没有任何更新，该组件在非嵌套路由模式下可正常工作。

相关代码如下：

App.tsx #

function App() {
return (
<div className="App">
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='products' element={<ProdList />} >
      <Route path=":id" element={<ProdDetails />} />
    </Route>
  </Routes>
</div>
);
}

ProdList组件 #

const ProdList: React.FC = () => {
const [prods, setProdList] = useState<IProducts>([])

useEffect(() => {
    ProdAPI.getAll()
        .then((list: IProducts) => {
            setProdList(list)
        })
}, [])

return(
    <div>
        <div>
            {prods.map((prod) => (
                <li key={(prod.id).toString()}>
                    <Link to={(prod.id).toString()}>
                        {prod.title}
                    </Link>
                </li>
            ))}
        </div>
    </div>
)
}
export default ProdList

问题原因 #

React Router v6的嵌套路由机制要求父路由组件必须渲染<Outlet />组件，它是子路由组件的挂载容器。当前ProdList组件中没有添加<Outlet />，导致匹配到的ProdDetails组件没有地方渲染，所以界面无变化。

解决方案 #

在ProdList组件的返回内容中添加<Outlet />，指定子路由组件的渲染位置。修改后的ProdList代码如下：

import { Outlet } from 'react-router-dom'; // 导入Outlet组件

const ProdList: React.FC = () => {
const [prods, setProdList] = useState<IProducts>([])

useEffect(() => {
    ProdAPI.getAll()
        .then((list: IProducts) => {
            setProdList(list)
        })
}, [])

return(
    <div>
        <div>
            {prods.map((prod) => (
                <li key={(prod.id).toString()}>
                    <Link to={(prod.id).toString()}>
                        {prod.title}
                    </Link>
                </li>
            ))}
        </div>
        {/* 添加Outlet，子路由组件将在这里渲染 */}
        <Outlet />
    </div>
)
}
export default ProdList

配置完成后，点击商品链接跳转到products/:id路径时，ProdDetails组件会渲染在ProdList的<Outlet />位置，界面即可正常更新。

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