重新加载页面后，我试图保持先前选择的标签的状态。阅读几篇文章后，考虑到当前情况，使用查询参数似乎是一种更有效的选择，而不是在扩展时使用Redux。任何人都可以显示一个示例或演示，以显示我如何构造它以适应和使用当前结构吗？感谢您的考虑。
以下是进口：
import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import {withStyles } from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import Contact from '../Screens/Contact'
import Profile from '../Screens/Profile'
import Settings from '../Screens/Settings'
import Messages from '../Screens/Messages'
import Products from '../Screens/Products'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";
这是类组件的开头：
class StaticComponents extends React.Component {
constructor(props) {
super(props);
this.state = {
values: 0,
mobileOpen: false,
active: true,
width: window.outerWidth,
height: window.outerHeight
};
this.handleChange = this.handleChange.bind(this);
this.handleDrawerToggle = this.handleDrawerToggle.bind(this)
this.closeDrawer = this.closeDrawer.bind(this)
this.activAte = this.activAte.bind(this)
this.updateDimensions = this.updateDimensions.bind(this);
//binds the function not its variable
}
componentWillUpdate() {
window.addEventListener("resize",this.updateDimensions);
}
handleChange=(_,values)=>this.setState({ values });
updateDimensions() {
this.setState({
height: window.outerHeight,
width: window.outerWidth
});
}
handleDrawerToggle(){
const toggleDrawer= this.state.mobileOpen === false ? true : false;
this.setState({mobileOpen: toggleDrawer})
}
closeDrawer(){
this.setState({mobileOpen: false})
}
activAte(){
this.setState({active: true})
}
render(){
const homeR= this.state.active
const {classes} = this.props;
const {values}= this.state
const widthS= this.state.width
这是保存制表符结构的抽屉变量：
const drawer = (
<Route
path="/"
render={() => (
<nav>
<div style={{ left: 70, position: 'relative', marginTop: 40 }}>
<VerticalTabs
value={values}
variant="fullWidth"
onChange={this.handleChange}
>
<MyTab
component={Link}
to="/"
disableRipple={widthS < 599 ? true : false}
onClick={this.handleDrawerToggle}
icon={
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="460.298px"
height="460.297px"
viewBox="0 0 460.298 460.297"
space="preserve"
fill={values === 0 ? '#0D9DCE' : '#9B9B9B'}
className="home"
>
{homeA}
{homeB}
</svg>
}
label={
<p
className="home-Text"
style={{ color: values === 0 ? 'white' : '#9B9B9B' }}
>
Home
</p>
}
/>
<MyTab
component={Link}
to="/Screens/Contact"
disableRipple={widthS < 599 ? true : false}
onClick={this.handleDrawerToggle}
icon={
<svg
height="512pt"
viewBox="0 0 512 512"
width="512pt"
xmlns="http://www.w3.org/2000/svg"
fill={values === 1 ? '#0D9DCE' : '#9B9B9B'}
className="processes"
>
{ContactA}
</svg>
}
label={
<p
className="processes-Text"
style={{ color: values === 1 ? 'white' : '#9B9B9B' }}
>
Contact
</p>
}
/>
<MyTab
component={Link}
to="/Screens/Profile"
disableRipple={widthS < 599 ? true : false}
onClick={this.handleDrawerToggle}
icon={
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512.001 512.001"
space="preserve"
className="designs"
fill={values === 2 ? '#0D9DCE' : '#9B9B9B'}
>
{ProfileA}
</svg>
}
label={
<p
className="designs-Text"
style={{ color: values === 2 ? 'white' : '#9B9B9B' }}
>
Profile
</p>
}
/>
<MyTab
component={Link}
to="/Screens/Settings"
disableRipple={widthS < 599 ? true : false}
onClick={this.handleDrawerToggle}
icon={
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512 512"
space="preserve"
className="materials"
fill={values === 3 ? '#0D9DCE' : '#9B9B9B'}
>
{SettingsA}
{SettingsB}
</svg>
}
label={
<p
className="materials-Text"
style={{ color: values === 3 ? 'white' : '#9B9B9B' }}
>
Settings
</p>
}
/>
<MyTab
component={Link}
to="/Screens/Messages"
disableRipple={widthS < 599 ? true : false}
onClick={this.handleDrawerToggle}
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
width="512"
height="512"
viewBox="0 0 60 60"
version="1.1"
className="printers"
fill={values === 4 ? '#0D9DCE' : '#9B9B9B'}
>
{MessagesA}
{MessagesB}
{MessagesC}
{MessagesD}
{MessagesE}
{MessagesF}
</svg>
}
label={
<p
className="printers-Text"
style={{ color: values === 4 ? 'white' : '#9B9B9B' }}
>
Messages
</p>
}
/>
<MyTab
component={Link}
to="/Screens/Products"
disableRipple={widthS < 599 ? true : false}
onClick={this.handleDrawerToggle}
icon={
<svg
height="512pt"
viewBox="0 0 512 512"
width="512pt"
xmlns="http://www.w3.org/2000/svg"
className="forum"
fill={values === 5 ? '#0D9DCE' : '#9B9B9B'}
>
{ProductsA}
{ProductsB}
{ProductsC}
</svg>
}
label={
<p
className="QA-Text"
style={{ color: values === 5 ? 'white' : '#9B9B9B' }}
>
Products
</p>
}
/>
</VerticalTabs>
</div>
</nav>
)}
/>
);
以下是嵌套在BrowserRouter中的路由结构：
<Switch>
<Route path="/Screens/Contact" component{Contact} />
<Route path="/Screens/Profile" component={Profile} />
<Route path="/Screens/Settings" component={Settings} />
<Route path="/Screens/Messages" component={Messages} />
<Route path="/Screens/Products" component={Products} />
<Route path="/" component={Home} />
</Switch>
答案 0 :(得分：1)
解密const抽屉有些困难，但是我会给您一个机会。可从 this.props.location.search 访问查询参数。参见此response。您可以在路由器中使用 / screens / profile /：param 将参数传递到个人资料部分。然后使用上述道具在子组件中抓取它。
另一种方法是使用window.location属性并获取路径名：
const location = window.location.pathname;
const lastSlashIndex = location.lastIndexOf('/') + 1;
const id = location.substring(lastSlashIndex)
这将找到斜杠的最后一个索引，并且id将包含您通过路由器传递的参数。
如果有多个，可以按照以下步骤进行操作：
const paramMap = new Map();
const searchSplit = location.search.split("&");
searchSplit.forEach(item => {
paramMap.set(item.split("=")[0], item.split("=")[1])
});
这将找到您传入的所有参数，例如，您可以通过 paramMap.get（“？id”）;从paramMap const访问它们。
希望我正确理解了您的问题:)