Dynami c React Routing

Question

Я новичок, чтобы реагировать, поэтому мне нужно понять, как динамически маршрутизировать. У меня есть домашняя страница www.abc.com. На этой странице у меня есть 2 блока, которые отображаются динамически, а именно: Новый курс и Недавний продукт . Оба имеют кнопка просмотра .

когда я нажимаю просмотреть больше кнопку Нового курса, я хочу go перейти на новую страницу www.abc.com/new-deal. когда я нажимаю просмотреть больше кнопку недавнего продукта я хочу перейти к www.abc.com/recent-product.

Как я могу динамически маршрутизировать его?

Answer 1

Вам необходимо добавить Маршрут внутри вашей домашней страницы приложения. Go через вложенную маршрутизацию документация

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

Рабочая демонстрация