React Native onPress跳转页面问题：点击Connexion按钮跳转至About.js

Hey there! Since you're working with React and need to navigate to the About.js page when clicking the "Connexion" button, you'll need to use React Router DOM—React doesn't have built-in routing for single-page apps, so this is the standard tool for the job. Let's break this down step by step:

Step 1: Install React Router DOM #

First, add the routing library to your project. Open your terminal and run the command matching your package manager:

• Using npm: npm install react-router-dom
• Using yarn: yarn add react-router-dom

Step 2: Configure Routing in App.js #

Next, set up the routes so React knows which component to render for each URL. Here's how to update your App.js:

// Import required routing components and your About component
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import About from './About'; // Ensure this path matches where your About.js is stored

function App() {
  return (
    <Router>
      {/* Your existing App content stays here */}
      <h1>Welcome to My App</h1>
      
      {/* Option 1: Wrap your button in a Link component */}
      <Link to="/about">
        <button>Connexion</button>
      </Link>

      {/* Define your page routes */}
      <Routes>
        {/* Route for the home page (your current App content) */}
        <Route path="/" element={<div>Home Page Content</div>} />
        {/* Route for the About page */}
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Step 3: Alternative - Programmatic Navigation with useNavigate #

If you need to run custom logic (like form validation or API calls) before navigating, use the useNavigate hook instead. Here's that approach:

import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import About from './About';

function App() {
  const navigate = useNavigate();

  const handleConnexionClick = () => {
    // Add any pre-navigation logic here (e.g., checking user input)
    console.log('Preparing to navigate...');
    navigate('/about');
  };

  return (
    <Router>
      <h1>Welcome to My App</h1>
      
      {/* Use onClick handler to trigger navigation */}
      <button onClick={handleConnexionClick}>Connexion</button>

      <Routes>
        <Route path="/" element={<div>Home Page Content</div>} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Step 4: Set Up Your About.js Component #

Make sure your About.js is a valid React component to test the navigation. Here's a simple example:

function About() {
  return (
    <div>
      <h2>About Page</h2>
      <p>You've successfully navigated here from the Connexion button!</p>
    </div>
  );
}

export default About;

Quick Tips: #

• Always wrap your routing setup inside BrowserRouter (we aliased it as Router for simplicity).
• The to value in Link or the argument passed to navigate() must match the path defined in your Route component.
• Double-check the import path for About.js—if it's in a subfolder (like ./pages/About), adjust the path accordingly.

内容的提问来源于stack exchange，提问作者Raphael Trembleau