React新项目中，后续页面如何使用新旧React元素？

Hey there! Let's walk through this clearly since you've already got your React project off the ground with a working landing page.

Part 1: Using Existing & New React Elements in Subsequent Pages #

First, most modern React projects (like those created with Create React App) are Single-Page Applications (SPAs). Instead of traditional "pages" (separate HTML files), we use client-side routing to display different components as "pages". Here's how to handle this:

1. Set Up Routing (React Router) #

To manage navigation between "pages", you'll need React Router, the standard routing library for React:

• Install it via npm/yarn:

  npm install react-router-dom
  # or
  yarn add react-router-dom
  

2. Configure Routes #

Create or update your root component (usually src/App.js) to define routes for your landing page and new pages:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// Import your existing landing page component
import LandingPage from './LandingPage';
// Import new components (create these first!)
import AboutPage from './AboutPage';
import ContactPage from './ContactPage';
// Import reusable elements (e.g., Navbar, Footer)
import Navbar from './Navbar';
import Footer from './Footer';

function App() {
  return (
    <Router>
      {/* Reuse existing elements across all pages */}
      <Navbar />
      <Routes>
        {/* Your existing landing page */}
        <Route path="/" element={<LandingPage />} />
        {/* New pages */}
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

3. Reuse Existing React Elements #

Any component you've already built (like Navbar, Button, or sections from your landing page) can be reused in new pages by simply importing them:

// In AboutPage.jsx
import Navbar from './Navbar';
import CallToAction from './CallToAction'; // Reusable CTA from landing page

function AboutPage() {
  return (
    <div>
      <Navbar /> {/* Reuse existing Navbar */}
      <h1>About Us</h1>
      <p>...</p>
      <CallToAction /> {/* Reuse landing page's CTA component */}
    </div>
  );
}

export default AboutPage;

4. Create & Use New React Elements #

To add new elements:

• Create a new .jsx or .js file (e.g., ContactPage.jsx):

  function ContactPage() {
    // Your new component logic here
    return (
      <div>
        <h1>Get In Touch</h1>
        <form>
          {/* New form elements */}
          <input type="text" placeholder="Your Name" />
          <button type="submit">Send Message</button>
        </form>
      </div>
    );
  }
  
  export default ContactPage;
  

• Import and add this component to your routes (as shown in step 2), or use it inside another component just like you would existing elements.

Part 2: Using React in New Pages (After Default Setup) #

If you're referring to adding more "pages" to your existing React project (the SPA approach), the steps above cover that. But if you need to use React in a separate HTML file (multi-page app setup), here's what to do:

1. Add React Scripts to the New HTML File #

In your new HTML file (e.g., about.html), include React and ReactDOM via CDN, plus a script tag for your component code:

<!DOCTYPE html>
<html>
  <head>
    <title>About Page</title>
    <!-- Load React -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Load Babel to transpile JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <!-- Your React component code -->
    <script type="text/babel">
      // Reuse existing components (if they're exported properly)
      // Or create new elements here
      function AboutPage() {
        return <h1>About Us (Multi-Page Setup)</h1>;
      }

      ReactDOM.createRoot(document.getElementById('root')).render(<AboutPage />);
    </script>
  </body>
</html>

2. For a Bundled Multi-Page App #

If you're using a bundler like Webpack or Vite (instead of CDNs), you'll need to configure your build tool to output multiple HTML files, each linked to their respective React bundles. For Create React App, you can use packages like react-app-rewired to modify the default config for multi-page support.

内容的提问来源于stack exchange，提问作者Manav Neema