尝试在 React 中使用 onClick 更新 url-参数

Question

我正在尝试设置一个根据useState而变化的URL。我这样做是因为我希望能够使用 url 访问这两个状态。所以这就是我的路由器文件的样子：

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

function router(){
return (
<Router>
<Switch>
<Route path="/restaurant/:toggleParameter" children={<Restaurant/>}/>
</Switch>
</Router>
);
}

export default router;

组件餐厅如下所示：

import React, {useEffect, useState} from 'react';
import {useParams,Redirect} from "react-router-dom";
function RestaurantLandingPage(){

const {toggleParameter} = useParams();
console.log("Parameter");
console.log(toggleParameter);
const [profileToggle,setProfileToggle] = useState(toggleParameter);
const restaurantID =localStorage.getItem("restaurantId");
console.log(restaurantID);
const changeParameterToProfile =()=>{
setProfileToggle("profile");
};
const changeParameterToMenu=()=>{
setProfileToggle("menu");
}
return (
<div id="wrapper">
<div className="restaurantHover">
<button
className="switchButton"
onClick={()=>{changeParameterToProfile()}}
style={profileToggle==="profile"? {textDecoration:'underline',textDecorationThickness:'3px',textDecorationColor:'#6C5AF2'}:{}}
>
Profile
</button>
<button
className="switchButton"
onClick={changeParameterToMenu}
style={profileToggle==="menu"?{textDecoration:'underline',textDecorationThickness:'3px',textDecorationColor:'#6C5AF2'}:{}}
>
Menu
</button>
<div id="switchBottom"/>
{(profileToggle==="profile")&&(
<Contact profileToggle={profileToggle} changeParameterToMenu={changeParameterToMenu}/>
)}
{(profileToggle==="menu")&&(
<RestauarntMenuOverview/>
)}
</div>
</div>
)}
}
export default RestaurantLandingPage;

url-param "toggleParameter" 是 "profile" 或 "menu"。我将使用 useParams() 访问它。现在，如果我按下按钮配置文件，url-param "toggleParameter"应该切换到配置文件，如果我按下按钮菜单，url-param "toggleParameter"应该切换到菜单。我以为我可以像这样使用重定向：

<button
className="switchButton"
onClick={()=>{changeParameterToProfile();
<Redirect to={/restaurant/{profileToggle}/>}}
style={profileToggle==="profile"? {textDecoration:'underline',textDecorationThickness:'3px',textDecorationColor:'#6C5AF2'}:{}}>
Profile
</button>

但这行不通。我对所有反应路由器的可能性有点困惑，因为我还没有找到合适的。

Answer 1

React 不允许在卸载组件时更新状态，这会导致隐藏在您眼前的一些严重内存泄漏。此外setState函数是一个Asynchrounus函数，它可以在history.push方法之后调用。使用history.push更改路由将卸载组件，在某些情况下，之后可能会调用setState，从而导致卸载组件的状态更新。此外，profileToggle的值只有在setProfileToggle被称为保持profileToggle的值不变后才会更改，history.push也将使用以前的值，您或用户必须单击该按钮两次才能转到/restaurant/profile或/restaurant/menu

代码：

import {useParams,useHistory } from "react-router-dom";
function RestaurantLandingPage(){
const history = useHistory()
const {toggleParameter} = useParams(); 
const changeParameterToProfile =()=>{
history.push(`/restaurant/profile`)
};
const changeParameterToMenu=()=>{
history.push(`/restaurant/menu`)
}
return(
...... 
<button
className="switchButton"
onClick={()=>changeParameterToProfile()}
style={toggleParameter==="profile"? 
{ textDecoration:'underline',
textDecorationThickness:'3px',
textDecorationColor:'#6C5AF2'
}:{}
}
>
Profile
</button>
...... 
) 
}

Answer 2

试试这个

import {useParams,useHistory } from "react-router-dom";
function RestaurantLandingPage(){
const history = useHistory()
const {toggleParameter} = useParams(); 
const changeParameterToProfile =()=>{
setProfileToggle("profile");
history.push(`/restaurant/${profileToggle} `)
};
const changeParameterToMenu=()=>{
setProfileToggle("menu")
history.push(`/restaurant/${profileToggle} `)
}
return(
...... 
<button
className="switchButton"
onClick={()=>{changeParameterToProfile();}
style={profileToggle==="profile"? {textDecoration:'underline',textDecorationThickness:'3px',textDecorationColor:'#6 
C5AF2'}:{}}>
Profile
</button>
<button
className="switchButton"
onClick={()=>{changeParameterToMenu();}
style={profileToggle==="profile"? 
{textDecoration:'underline',textDecorationThickness:'3px',textDecorationColor:'#6 
C5AF2'}:{}}>
Menu
</button>
...... 
) 
} 

让我知道它是否有效