Как сделать на реакте, чтобы при нажатии на ссылку открывалась новая страница моего сайта?

Question

classicartt @Classicart54

React

Как сделать на реакте, чтобы при нажатии на ссылку открывалась новая страница моего сайта?

Подскажите пожалуйста, что мне использовать, чтобы при нажатии на ссылку у меня открывалась совершенно новая страница моего сайта? Я пробовал использовать react-router, но он просто отображает эту компоненту под всеми остальными компонентами, внизу сайта (на скриншотах все покажу). Мне нужно, чтобы совершенно другая, новая страница открывалась.

1. Код компоненты App

import logo from './logo.svg';
import styles from './App.module.scss';
import Main from './components/Main/Main';
import About from './components/About/About';
import OneBenefit from './components/Benefits/OneBenefit/OneBenefit';
import Cases from './components/Cases/Cases';
import Services from './components/Services/Services';
import TwoBenefit from './components/Benefits/TwoBenefit/TwoBenefit';
import ThreeBenefit from './components/Benefits/ThreeBenefit/ThreeBenefit';
import Stages from './components/Stages/Stages';
import FourBenefit from './components/Benefits/FourBenefit/FourBenefit';
import Cooperation from './components/Cooperation/Cooperation';
import FiveBenefit from './components/Benefits/FiveBenefit/FiveBenefit';
import Blog from './components/Blog/Blog';
import Reviews from './components/Reviews/Reviews';
import Set from './components/Set/Set';
import SixBenefit from './components/Benefits/SixBenefit/SixBenefit';
import Contacts from './components/Contacts/Contacts';
import SevenBenefit from './components/Benefits/SevenBenefit/SevenBenefit';
import Footer from './components/Footer/Footer';
import Forms from './components/Forms/Forms';
import Kits from './components/Kits/Kits';
import AllPosiblities from './components/AllPosiblities/AllPosiblities';
import { Route, Routes } from 'react-router';


const App = () => {
  return (
    <div className={styles.wrap}>
      <Main/>
      <About/>
      <OneBenefit/>
      <Cases/>
      <TwoBenefit/>
      <Services/>
      <SevenBenefit/>
      {/*<ThreeBenefit/>*/}

      <Stages/>
      <FourBenefit/>
      <Cooperation/>
      <FiveBenefit/>
      <Blog/>
      <Reviews/>
      <Set/>
     {/* <SixBenefit/>*/}
      <Contacts/>
      <SevenBenefit/>
      <Footer/>


      <Routes>
            <Route path="/contacts" element={<Forms/>}> </Route>
            <Route path="/kits" element={<Kits/>}> </Route>
            <Route path="/posiblities" element={<AllPosiblities/>}> </Route>
      </Routes>

    </div>
  );
}

export default App;

2. Код компоненты ссылки на другую страницу

import styles from '../../../scss/Benefits/OneBenefit.module.scss';
import React, {useState} from 'react';
import { NavLink } from 'react-router-dom';




const  OneBenefit = () => {

  return (
    <div className={styles.wrap}>
        <NavLink to="/contacts">

        <div className={styles.content}>
            <h2 className={styles.title}>Создаем интернет-решения для бизнеса и считаем, что в наше <br/> время, сайт - лицо компании и на него нужно делать акцент</h2>
            <div className={styles.contact}>
                <svg width="175" height="23" viewBox="0 0 175 23" xmlns="http://www.w3.org/2000/svg">
                    <path d="M174.06 12.3841C174.646 11.7984 174.646 10.8486 174.06 10.2628L164.514 0.716885C163.929 0.131098 162.979 0.131098 162.393 0.716885C161.807 1.30267 161.807 2.25242 162.393 2.83821L170.878 11.3235L162.393 19.8088C161.807 20.3946 161.807 21.3443 162.393 21.9301C162.979 22.5159 163.929 22.5159 164.514 21.9301L174.06 12.3841ZM-0.000244141 12.8235H173V9.82349H-0.000244141V12.8235Z" />
                </svg>

                <p>Сотрудничать</p>

            </div>
        </div>

        </NavLink>


    </div>
  );
}

export default OneBenefit;

3. Вот, что выводится. То есть в конце всего сайта вообще