CODEWITHSUNDEEP
reactjsreact-reduxreact-routerreact-router-dom
Ras
Ras

Reputation: 25

Dynamic React Routing

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?

Upvotes: 0

Views: 155

Answers (1)

Jagrati
Jagrati

Reputation: 12222

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

Upvotes: 1

Related Questions