I am new to react so i need to understand how to dynamically route . I have a homepage www.abc.com. In that page i have 2 blocks which are rendered dynamically namely New Deal and Recent Product .Both has view more button.
when i click on view more button of New Deal i want to go to new page www.abc.com/new-deal. when i click on view more button of Recent Product i want to navigate to www.abc.com/recent-product.
How can i route it dynamically?
You need to add Route inside you homepage App component. Go through the nested routing documentation
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"));
