如何在点击蚂蚁设计步骤时更改URL？
如何在点击蚂蚁设计步骤时更改URL？
提问于 2020-04-03 18:43:28
上下文：
使用，我可以单击每个步骤，步骤将更新并导航到该步骤以反映这一点。现在，我试图添加一个额外的功能，在单击一个步骤时，URL也会发生变化。这个想法是，URL中的更改将路由到显示在页面上的某些组件。我试图通过在链接的每一步中包装图标来做到这一点。
问题
现在，当我单击一个步骤时，URL确实会更新，但是步骤本身不会更新，并且导航到该步骤反映了这一点。如果我再次单击相同的步骤，那么步骤将更新并导航到它。我希望能做到这一点，而不必点击一步两次。
这是密码
<Steps
size="small"
current={current}
onChange={setCurrent}
type="navigation"
>
<Steps.Step
title="People"
icon={
<Link to="/workshop/client-portal/stage/file-management/people">
<Dataset.Icon type="people" />
</Link>
}
/>
<Steps.Step
title="Positions"
icon={
<Link to="/workshop/client-portal/stage/file-management/positions">
<Dataset.Icon type="positions" />
</Link>
}
/>
<Steps.Step
title="Links"
icon={
<Link to="/workshop/client-portal/stage/file-management/Links">
<Dataset.Icon type="links" />
</Link>
}
/>
<Steps.Step
title="Lookups"
icon={
<Link to="/workshop/client-portal/stage/file-management/lookups">
<Dataset.Icon type="lookups" />
</Link>
}
/>任何想法或见解都将不胜感激。
谢谢您抽时间见我。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-03 20:57:28
在我看来，你的问题是因为你只是用一个链接包装你的图标，所以点击标签不会触发路线的改变。因此，基本上您可以使用这个模式来链接整个步骤：
<Steps.Step
title={
<Link to="/workshop/client-portal/stage/file-management/people">
People
</Link>
}
icon={
<Link to="/workshop/client-portal/stage/file-management/people">
<Dataset.Icon type="people" />
</Link>
}
/>我根据您提供的代码创建了这个简化的沙箱，以演示这是如何工作的。
您还可以做的另一件事是使用react-router的history.push()方法来推送到Steps onChange上您喜欢的链接：
<Steps
size="small"
current={current}
onChange={(id)=>{
setCurrent(id);
history.push(
/* the path you want to push to based on the route id */
)
}}
type="navigation"
>如果您使用第二种解决方案，甚至不需要使用Link。
Stack Overflow用户
发布于 2020-04-03 21:11:14
让它变得简单：
<Steps
size="small"
current={current}
onChange={setCurrent}
type="navigation"
>
<Steps.Step
icon=""
title={
<Link to="/workshop/client-portal/stage/file-management/people">
<Dataset.Icon type="people" /> People
</Link>
}
/>
<Steps.Step
icon=""
title={
<Link to="/workshop/client-portal/stage/file-management/positions">
<Dataset.Icon type="positions" /> Positions
</Link>
}
/>
<Steps.Step
icon=""
title={
<Link to="/workshop/client-portal/stage/file-management/Links">
<Dataset.Icon type="links" /> Links
</Link>
}
/>
<Steps.Step
icon=""
title={
<Link to="/workshop/client-portal/stage/file-management/lookups">
<Dataset.Icon type="lookups" /> Lookups
</Link>
}
/>我觉得应该管用。
Stack Overflow用户
发布于 2020-04-03 22:16:23
您正试图将链接附加到Step的图标中，这意味着不能通过单击description更改Steps的状态，只有icon才能工作。
这是use query way (/demo?step=1)，您可以实现另一个use hash (/demo#1)您自己
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./styles.css";
import { Steps, Divider } from "antd";
import { BrowserRouter, Route, Link, useLocation } from "react-router-dom";
import { Layout } from "antd";
const { Header } = Layout;
const { Step } = Steps;
function useStep() {
const params = new URLSearchParams(useLocation().search);
return parseInt(params.get("step"), 10);
}
const App = () => (
<BrowserRouter>
<Header>
<Link to="/demo">Demo</Link>
</Header>
<Route path={"/demo"} component={Demo} />
</BrowserRouter>
);
const StepContent = () => {
const step = useStep();
return <div>This is Step {step}</div>;
};
const Demo = ({ match, history }) => {
const step = useStep();
// Init current with step get from the URL
// so you can jump to the step 2 by enter the link on the address bar
const [current, setCurrent] = React.useState(step);
const onChange = current => {
setCurrent(current);
history.push(`${match.path}?step=${current}`);
};
return (
<div style={{ paddingTop: 20 }}>
<Steps current={current} onChange={onChange}>
<Step title="Step 0" description="This is a description." />
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
</Steps>
<Divider />
<Route path={`${match.path}`} exact component={StepContent} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));查看码箱上的演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61018493
复制相关文章
相似问题
腾讯云开发者
