Reactjs 刷新时不显示模态_Reactjs_React Redux_React Router_Material Ui_React Router Dom

Reactjs 刷新时不显示模态

reactjs material-ui

Reactjs 刷新时不显示模态,reactjs,react-redux,react-router,material-ui,react-router-dom,Reactjs,React Redux,React Router,Material Ui,React Router Dom,当用户点击一个产品时，我使用MaterialUI和redux呈现一个模式，效果非常好。现在我正在尝试使用react router v6添加路由 App.jsx export default function App() { return ( <> <CssBaseline /> <AppBar> <Routes>

当用户点击一个产品时，我使用MaterialUI和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 />
        </>
);
}

function handleResultClick() {
    onToggleProductModal();
}

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

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

结果卡中指向产品模式的链接生成正确的URL

Result.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 />
        </>
);
}

function handleResultClick() {
    onToggleProductModal();
}

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

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

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

有人知道我需要做什么才能使这项工作正常吗？

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

这就是我要做的：

删除

并修改路线：

在结果列表中：

    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

然后，您可以从卡组件中删除onClick道具，因为每次您导航到

/：productType/：category/：brandproduct

，刷新页面时都会打开该模式，谢谢！当我从

path=“/：productType/：category/：brandproduct？”

中删除问号时，这就起到了作用。这是出于某种原因还是打字错误？对不起，我的错，在react router

[parameters]相关文章推荐

随机文章推荐