Question 302461 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React-Route Link with react-router-dom V6

When I click on the button of the secondpage, it is added to this landing page at the very bottom(after Footer). The transition comes from the courses page. How do I make the secondpage open as a new page, and not as an addition to the landing page(after Footer)?
I mean, that it looks like:
Header
Zagolovok
Courses
Teacher
Fiq
Footer
SecondPage

But it is necessary that only:
SecondPage

App.js

import React from 'react';
import "./App.css";
import { Route, Routes } from 'react-router-dom';
import { Header } from './Header';
import { Advantages } from './Advantages';
import { Zagolovok } from './Zagolovok';
import { Something } from './Something';
import { Courses } from './Courses';
import { Teachers } from './Teachers';
import { Fiq } from './Fiq';
import { Footer } from './Footer';
import { SecondPage } from './SecondPage'; // Импортируйте новую страницу


function App() {
  return (
          <div className="App" style={{ color: 'white', fontFamily: 'Arial, sans-serif' }}>
              <Header />
              <Zagolovok />
              <Advantages />
              <Courses />
              <Teachers />
              <Something />
              <Fiq />
              <Footer />
              <Routes>
                  <Route path="/courses" element={<Courses />} />
                  <Route path="/secondpage" element={<SecondPage />} />
              </Routes>
          </div>
  );
};

export default App;`

In courses page:

<Link to="/secondpage" target="_blank" rel="noopener noreferrer">
                <button className="register-button" onClick={handleRegistration}>
                  Registration
                </button>
</Link>`

Package.json

{
  "name": "untitled3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
Tags:

3

Answers


  1. 0

    Recognize that your React app is a "tree of components" that begins with the root component, normally called <App>.

    If you want to just show <SecondPage> when it is navigated to, then you cannot have your root element rendering all the rest of the stuff you no longer want to see.

    So change App.jsx to something like:

    return (
  <div className="App" style={{ color: 'white', fontFamily: 'Arial, sans-serif' }}>
    <Routes>
      <Route path="/courses" element={<Courses />} />
      <Route path="/secondpage" element={<SecondPage />} />
    </Routes>
  </div>
);

    and move the other tags into <Courses>.

    Login or Signup to reply.
  2. 0

    The App component is unconditionally rendering the header, footer, and everything between, all above the routes you are navigating to.

    Refactor the code to render the main content on a route as well. Move the routes between the header and footer.

    Example:

    const Home = () => (
  <>
    <Zagolovok />
    <Advantages />
    <Courses />
    <Teachers />
    <Something />
    <Fiq />
  </>
);

function App() {
  return (
    <div className="App" style={{ color: 'white', fontFamily: 'Arial, sans-serif' }}>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/courses" element={<Courses />} />
        <Route path="/secondpage" element={<SecondPage />} />
      </Routes>
      <Footer />
    </div>
  );
};

    If you like, you can also create a layout route to render the header and footer.

    Example:

    import { ..., Outlet } from 'react-router-dom';

...

const AppLayout = () => (
  <>
    <Header />
    <Outlet />
    <Footer />
  </>
);

function App() {
  return (
    <div className="App" style={{ color: 'white', fontFamily: 'Arial, sans-serif' }}>
      <Routes>
        <Route element={<AppLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/courses" element={<Courses />} />
          <Route path="/secondpage" element={<SecondPage />} />
        </Route>
      </Routes>
    </div>
  );
};
    Login or Signup to reply.
  3. 0

    React-Route Link with react-router-dom V6
    https://www.youtube.com/watch?v=GySIL93oyKo&t=21s

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search