0

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?

1
  • use react router or reach-router and configure your routes and add links to elements Commented Apr 29, 2020 at 11:05

1 Answer 1

1

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"));

Working Demo

Sign up to request clarification or add additional context in comments.

6 Comments

i want to navigate to new page . and blocks are dynamically generated. if its New Deals.Later if the block changes to Recent deals,then url should be the name of the block. abc.com/recent-deal. In the above example its showing as /viewdeal .
The above example only contains an example of viewDeals, You will need to add recent-deal in the same fashion. Please check the working demo. Have updated.
HI. Thank you for the reply. But i have mentioned that the blocks are dynamic. So i have only one View all button which is generated for both the blocks. In the exmaple you have given two separate buttons.In that case this wont work right ? Need your help to figure it out
Can you create a sandbox, so to understand your requirement properly? Based on my understanding you should have a way so that clicking on view all will take you to respective page.
Hi Jagrati. I am not able to create a sandbox. But what i want is something we can see in flipkart. In flipkart homepage you can see few blocks..so when i click . The url appended is the name like ( flipkart.com/new-arrival). So i want it to append like that. Tomorrow if it's changed to hot deals. The url should be /home-deals. The name should be appended in browser url.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.