Как мне перенаправить мою кнопку на другую страницу с помощью response-router-dom?

Question

На моей странице есть кнопка «Факты о питании», которая при нажатии может перейти на другую страницу моего сайта, на которой перечислены факты о питании. Как мне это сделать?

Answer 1

• В основном вам нужно использовать пакет react-router-dom и использовать BrowserRouter и Route и Switch и определять свои маршруты.
• Затем вам нужно обернуть вашу кнопку с помощью Link и укажите, куда направить.

Компонент вашего приложения

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NutritionPage from "./components/NutritionPage";
import NutritionFacts from "./components/NutritionFacts";

function App() {
  return (
    <Router>
      <Switch>
          <Route path='/' exact component={NutritionPage}></Route>
          <Route path='/nutrition-facts' component={NutritionFacts}></Route>
      </Switch>
    </Router>
  );
}

export default App;

Компонент NutritionPage

import React from 'react';
import {Link} from "react-router-dom";

const NutritionPage = (props) => {
    return (<div>
        <h2>My Nutrition Page</h2>
        <Link to='/nutrition-facts'><button>Nutrition Facts</button></Link>
    </div>)
};

export default NutritionPage;

Компонент NutritionFacts

import React from 'react';

const NutritionFacts = (props) => {
    return (<div>Nutrition Facts List Page</div>)
};

export default NutritionFacts;

Для получения дополнительной информации и примеров прочитайте документы