使用react路由器和react-swipeable -views在选项卡更改时更改url

Question

我有一个使用material-ui tabs和react-swipeable-views的react组件。我遇到的问题是，当切换标签时，显示的url不会改变，我注意到这是react-swipeable-views逻辑。我还想应用react-router，以便在保留react-swipeable-view逻辑的同时更改选项卡上的urls。

下面是我的代码的一部分，还有一些额外的细节：

import SwipeableViews from 'react-swipeable-views';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

export default function TasksViewTabs(props) {
        const task = props.match.params.taskid
        const classes = useStyles();
        const [value, setValue] = React.useState(0);
    
        const handleChange = (event, newValue) => {
            console.log('new value', newValue)
            setValue(newValue);
        };
    
        const handleChangeIndex = (index) => {
            setValue(index);
        };
    
        console.log('value', value)
    
        return (
            <>
                    <Tabs value={value} onChange={handleChange} classes={{indicator: classes.indicator}}>
                        <Tab className={value === 0? classes.active_tabStyle : null} label="Runs" {...a11yProps(0)} />
                        <Tab className={value === 1? classes.active_tabStyle : null} label="Tasks" {...a11yProps(1)} />
                        <Tab className={value === 2? classes.active_tabStyle : null} label="Settings" {...a11yProps(2)} />
                    </Tabs>
                <SwipeableViews index={value} onChangeIndex={handleChangeIndex}>
                        <RunApp value={value} index={0} taskid={task} />
                        <TaskApp value={value} index={1} taskid={task} />
                        <SettingsApp value={value} index={2} taskid={task} />
                </SwipeableViews>
            </>
        );
    }

默认的url显示如下，当视图改变时它不会改变：localhost:3000/clusters/<task:id>，但是我有三个标签(runs，tasks，settings)，它们控制着react-swipeable-views。我希望url在选项卡更改时分别显示为(localhost:3000/clusters/<task:id>/runs，localhost:3000/clusters/<task:id>/tasks，localhost:3000/clusters/<task:id>/settings)。

我如何才能做到这一点，并保留反应滑动逻辑？

谢谢

只是以防万一，url是从包含表的组件的history.push加载的。仅当单击表行时。

  rowClicked = (params) => {
    return (
      history.push({
        pathname: `/clusters/${params.data.md5_hash}`
      })
    )
  }

谢谢，我希望这对您有所帮助:)

Answer 1

经过研究，我找到了这个问题的答案。用于路由更改的最好的react swipeable库是react-swipeable-routes，所以我从react-swipeable-views更改为react -swipeable-views，并应用了react路由的使用，它的效果非常好。

//import SwipeableViews from 'react-swipeable-views'; //don't use this
import SwipeableRoutes from "react-swipeable-routes"; //use this
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
export default function FullWidthTabs(props) {
    const task = props.match.params.taskid
    // const theme = useTheme();
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        console.log('new value', newValue)
        setValue(newValue);
    };

    const handleChangeIndex = (index) => {
        setValue(index);
    };

    console.log('value', value)

    return (
        <>
            <HeaderContent>
                <Breadcrumbs />
                <ProfileMenu/>
            </HeaderContent>
            <Router> //use react-router
            <ToolBarContent>
//add routes in tabs
                <Tabs value={value} onChange={handleChange} classes={{indicator: classes.indicator}} style={{display: 'flex', justifyContent: 'space-between'}}>
                    <Tab to= {`clusters/${task}/runs`} className={value === 0? classes.active_tabStyle : null} label="Runs" {...a11yProps(0)}/>
                    <Tab to= {`clusters/${task}/tasks`} className={value === 1? classes.active_tabStyle : null} label="Tasks" {...a11yProps(1)}/>
                    <Tab to= {`clusters/${task}/settings`} className={value === 2? classes.active_tabStyle : null} label="Settings" {...a11yProps(2)}/>
                </Tabs>
            </ToolBarContent>
//the magic happens here
            <SwipeableRoutes  index={value} onChangeIndex={handleChangeIndex}>
            <Route path={`clusters/${task}/runs`} component={() => <RunApp value={value} index={0} taskid={task} />}/>
            <Route path={`clusters/${task}/tasks`} component={() => <TaskApp value={value} index={0} taskid={task} />}/>
            <Route path={`clusters/${task}/settings`} component={() => <SettingsApp value={value} index={0} taskid={task} />}/>
          </SwipeableRoutes>
          </Router>
        </>
    );
}

Answer 2

假设您有一个Route来匹配路径"/clusters/:taskId“

<Route path="/clusters/:taskId" component={TasksViewTabs} />

则此路由可以匹配任何前缀为"/clusters/:taskId“的路由，即

• "/clusters/:taskId/runs"
• "/clusters/:taskId/tasks"
• "/clusters/:taskId/settings"

您可以更新handleChangeIndex，以便在索引更改时也必须导航到匹配子路由。

创建选项卡/路由配置

const tabConfig = [
  {
    component: RunApp,
    label: 'Runs',
    link: 'runs',
  },
  {
    component: TaskApp,
    label: 'Tasks',
    link: 'tasks',
  },
  {
    component: SettingsApp,
    label: 'Settings',
    link: 'settings',
  },
];

更新渲染以将tabConfig映射到选项卡

return (
  <>
    <Tabs
      value={value}
      onChange={handleChange}
      classes={{ indicator: classes.indicator }}
    >
      {tabConfig.map(({ label }, i) => (
        <Tab
          key={i}
          className={value === i ? classes.active_tabStyle : null}
          label={label}
          { ...a11yProps(i) }
        />
      ))}
    </Tabs>
    <SwipeableViews
      index={value}
      onChangeIndex={handleChangeIndex}
    >
      {tabConfig.map(({ component: Component}, i) => (
        <Component key={i} value={value} index={i} taskid={task} />
      ))}
    </SwipeableViews>
  </>
);

更新handleChangeIndex以进行一些导航。

const { history, match } = props;
const { params: { taskid: task } } = match;

...

const handleChangeIndex = (index) => {
  setValue(index);
  history.replace(`/clusters/:taskId/${tabConfig[index].link}`);
};