我是新手,所以我需要了解如何动态路由。我有一个主页www.abc.com。在该页面中,我有两个动态呈现的区块,即新政和最新产品。两者都有查看更多按钮。
当我点击"新政"的"查看更多"按钮时,我想转到新页面www.abc.com/New-Deal。当我点击"最近的产品"的"查看更多"按钮时,我想导航到www.abc.com/Recent-Product.
如何动态路由?
您需要在主页应用程序组件中添加Route。浏览嵌套路由文档
const ViewDeal = () => {
return <strong>Deal Component</strong>;
};
const RecentDeal = () => {
return <strong>Recent Deal Component</strong>;
};
const App = () => {
return (
<div>
<div>
<Link to="/viewDeal">View Deal</Link>
</div>
<div>
<Link to="/recentDeal">View Recent Deal</Link>
</div>
</div>
);
};
const Routes = () => {
return (
<Router>
<Route exact path="/" component={App} />
<Route path="/viewDeal" component={ViewDeal} />
<Route path="/recentDeal" component={RecentDeal} />
</Router>
);
};
render(<Routes />, document.getElementById("root"));
工作演示