如何使用 React 中的組件創建新頁面？

Question

我目前在我的 React 應用程序中有一個頁面，它在一個頁面上呈現所有組件。 我想讓一個按鈕打開一個占據整個頁面的新組件，就像打開一個新站點一樣。

有什么辦法可以做到這一點？ 下面是我的代碼。

應用程序.js：

import { Route, Routes } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import Homepage from './components/Homepage';
import About from './components/About';
import Skills from './components/Skills';
import Projects from './components/Projects';
import ContactMe from './components/ContactMe';
import Contact from './components/Contact';

function App() {

  return (
    <>
    <Navbar />
      <div className='homepage-container-web'>
          <Homepage />
          <About />
          <Skills />
          <Projects />
          <ContactMe />
      </div>
    <div className='homepage-container-devices'>
      <Routes>
        <Route path='/' element={<Homepage />} />
        <Route path='/about' element={<About />}/>
        <Route path='/projects' element={<Projects />}/>
        <Route path='/contact' element={<ContactMe />}/>
      </Routes>
    </div>
    </>
  );
}

export default App;

聯系我.jsx：

import '../App.css';
import { ReactComponent as LinkedInLogo } from '../images/linkedin.svg';

function ContactMe() {
    
    return(
        <>
        <div className='contact-container' id='contactMe'>
            <div className='contact-box'>
                <h1>Want to connect?</h1>
                <button id='contact-me-btn'>Contact Me </button>
                <a>
                    <LinkedInLogo title='LinkedIn Profile' id='linkedinprofile-svg'/>
                </a>
            </div>
            <div className='contact-container-footer'>
                <h7>Designed and built by <a href='https://github.com/BlazingIsFire' target='_blank' title='Github'>Placeholder</a>.</h7>
            </div>
        </div>
        </>
    )   
}

export default ContactMe;

我想要ContactMe.jsx中的<button>Contact me!</button打開一個名為<Contact />的新組件/頁面。 我希望聯系人頁面占據整個頁面。

任何幫助表示贊賞！

Answer 1

是的，如下所示，您可以有嵌套路線或單獨路線。 錯誤和連接是單獨的路由，而其他路由是分層的。

索引.js

    import ReactDOM from "react-dom/client";
    import { BrowserRouter, Routes, Route } from "react-router-dom";
    import Layout from "./Layout";
    import Home from "./Home";
    import About from "./About";
    import Contact from "./Contact";
    import Connect from "./Connect";
    import Error from "./Error";
    
    export default function App() {
      return (
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route index element={<Home />} />
              <Route path="about" element={<About />} />
              <Route path="contact" element={<Contact />} />
            </Route>
            <Route path="/connect" element={<Connect />} />
            <Route path="*" element={<Error />} />
          </Routes>
        </BrowserRouter>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<App />);

布局.js

    import { Outlet, Link } from "react-router-dom";
    
    const Layout = () => {
      return (
        <>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/contact">Contact</Link>
              </li>
            </ul>
          </nav>
          <Outlet />
        </>
      );
    };
    
    export default Layout;

首頁.js

    const Home = () => {
      return <h1>Home</h1>;
    };
    
    export default Home;

關於.js

    const About = () => {
      return <h1>About Page</h1>;
    };
    
    export default About;

聯系人.js

    import { Link } from "react-router-dom";
    
    const Contact = () => {
      return (
        <div>
          <h1>Contact Me</h1>
          <Link to="/connect">Try & Reach Me!</Link>
        </div>
      );
    };
    
    export default Contact;

連接.js

    const Connect = () => {
      return <h1>Connected to me!</h1>;
    };
    
    export default Connect;

錯誤.js

    import { Link } from "react-router-dom";
    
    const NoPage = () => {
      return (
        <div>
          <h1>404 No Page Found!</h1>
          <Link to="/">Go Home</Link>
        </div>
      );
    };
    
    export default NoPage;

希望這可以幫助。

Answer 2

要呈現頁面組件，您需要使用 react- Router react-router-dom庫中的路由器。

你的App組件應該是這樣的：

function App() {

  return (
    // Add an import for this
    <BrowserRouter>
      <Navbar />
      <div className='homepage-container-web'>
        <Routes>
          <Route path='/' element={<Homepage />} />
          <Route path='/about' element={<About />}/>
          <Route path='/projects' element={<Projects />}/>
          <Route path='/contact-me' element={<ContactMe />}/>
          // This was missing
          <Route path='/contact' element={<Contact />}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

這將使頁面的全部內容成為分配給Route組件的element道具的組件之一。 也就是說，當 URL 是/about時，您將看到About組件，當它是/projects時，您將看到Projects組件等。

要在單擊按鈕時導航到Contact組件，您需要：

function ContactMe() {
  // Use useNavigate hook
  const navigate = useNavigate();

  return (
    <div className="contact-container" id="contactMe">
      <div className="contact-box">
        <h1>Want to connect?</h1>
        // Navigate to /contact-me on click
        <button id="contact-me-btn" onClick={() => navigate("/contact-me")}>
          Contact Me{" "}
        </button>
        <a>
          <LinkedInLogo title="LinkedIn Profile" id="linkedinprofile-svg" />
        </a>
      </div>
      <div className="contact-container-footer">
        <h7>
          Designed and built by{" "}
          <a
            href="https://github.com/BlazingIsFire"
            target="_blank"
            title="Github"
          >
            Andrew Schweitzer
          </a>
          .
        </h7>
      </div>
    </div>
  );
}

Answer 3

有幾種方法可以實現這一點。 我會使用來自 react-router-dom 的 Link Tag，但我還是會在這里列出三個示例。 從第一個開始，最簡單的一個，不用react-router-dom這樣的庫。

1. 將 Button 代碼嵌入到錨標記中，並將要重定向的 URL 作為 prop 傳遞給 ContactMe 組件。

例子：

    function ContactMe({contact}) {
    
    return(
    ................
    
    <a href={`/${contact}`}>
    <button id='contact-me-btn'>
    Click to redirect to {contact === '' ? "home" : contact}
    </button>
    </a>
    )
    }

2. 您可以使用 react-router-dom 中的 useNavigate() 鈎子

const navigate = useNavigate();
navigate("/nameofpage");

例子：

import { useNavigate } from "react-router-dom";

function ContactMe({contact}) {

const navigate = useNavigate();
    
    return(
    ................
    
    
    <button className="my-button" onClick={() => { navigate(`/${contact}`) }}>
        Click to redirect to {contact === '' ? "home" : contact}
     </button>
    
    )
    }

3. 您可以使用 react-router-dom 中的鏈接標簽，我在一開始就提到過。

例子：

<Link to="nameofpage"> Element </Link>

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

function ContactMe({contact}) {
    
    return(
    ................
    
    <Link to={`/${contact}`}>
    <button id='contact-me-btn'>
    Click to redirect to {contact === '' ? "home" : contact}
    </button>
     </Link>
    )
    }

我希望它有所幫助。

Answer 4

通過使用@DoGzTheFiGhTeR 的回答，我想到我可以將所有組件放入一個名為<Homepage />的主組件中。 一旦我這樣做了，我就能夠在我的 App.js 中創建 2 個單獨的路由。

我的代碼在下面，希望它會有所幫助。

應用程序.js：

    <Navbar />
      <div className='homepage-container-web'>
          <Routes>
              <Route>
                <Route path='/' element={<Homepage />}/>
              </Route>
              <Route path='/contact' element={<Contact />}/>
          </Routes>
      </div>
    <div className='homepage-container-devices'>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />}/>
        <Route path='/projects' element={<Projects />}/>
        <Route path='/contact' element={<ContactMe />}/>
      </Routes>
    </div>