刷新时未显示模态

如何解决刷新时未显示模态

当用户单击产品时，我正在使用material-ui并使用redux渲染模式，效果很好。现在，我正在尝试使用react-router v6添加路由。

App.jsx

export default function App() {
return (
        <>
            <CssBaseline />
            <AppBar>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/:productType" element={<FoodDrink />} />
                    <Route path="/:productType/:category" element={<ResultsList />}>
                        <Route path=":brandproduct" />
                    </Route>
                </Routes>
            </AppBar>
            <ProductModal />
        </>
);
}

<FoodDrink />和<ResultsList />组件呈现出出色的效果并可以按需导航。

当我点击一个结果时，它会使用redux打开模态。

ResultsList.jsx

function handleResultClick() {
    onToggleProductModal();
}

从结果卡到产品模式的链接会生成正确的URL。

Result.jsx

<>
        <Card
            component={Link}
            to={`${toKebabCase(props.brand)}-${toKebabCase(props.name)}`}
            onClick={props.clicked} // this calls handleResultClick in the parent,ResultsList.jsx
        >
            {cardContent}
        </Card>
        <Outlet />
    </>

当模式关闭时，URL会返回到ResultsList上的类别。 （我知道navigation（-1）可能不是最好的方法，但我认为目前还可以）。

ProductModal.jsx

const onCloseModal = () => {
    props.onToggleProductModal();
    navigate(-1);
};

问题在于，手动导航到相同的URL不会打开模式，而使用模式打开刷新页面会加载没有模式打开但具有正确URL的页面。

有人知道我需要做些什么吗？

解决方法

当前，由于onClick道具调用的功能，您正在打开模态。当您刷新页面时，不会调用该函数。

这就是我要做的：

删除<Route path=":brandproduct" />并修改路线： <Route path="/:productType/:category/:brandproduct?" element={<ResultsList />}>

在ResultsList上：

    const ResultList = () =>{    
    const { brandproduct } = useParams(); //https://reactrouter.com/web/api/Hooks/useparams
        useEffect(()=>{
        if(brandproduct){
        onToggleProductModal() 
        }
        },[brandproduct]) //every time brandproduct changes,useEffect will call this function
    // Rest of ResultList

然后您可以从Card组件中删除onClick道具，因为每次您导航到/:productType/:category/:brandproduct时，模态都会打开，刷新页面时会包含该