React项目中Button onClick页面跳转问题及导航工具使用咨询

Hey there! Let's work through your page navigation issue with React and reactstrap buttons.

First off, react-navigation is for React Native mobile apps, not web projects—so you won't need that tool here. For React web apps, the standard go-to for client-side routing is react-router-dom, which is what you should use instead of plain <a> tags or raw onClick window jumps.

Here's why your current attempts aren't working:

• A plain <a href> triggers a full browser page reload, which defeats the purpose of a single-page React app (we want to switch components without reloading the entire page).
• Just adding an onClick handler without using React's routing API won't properly tell your app to navigate to the new route.

Let's fix this step by step:

1. First, install react-router-dom #

Run this in your project terminal to add the library:

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

2. Wrap your app with a Router #

Make sure your root component (usually in index.js) is wrapped with <BrowserRouter> so routing works across your entire app:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

3. Update your LoginLayout component #

Since you're using a class component, we'll use the withRouter higher-order component to access routing props like history. Alternatively, you can wrap your Button with a <Link> component for simple declarative navigation.

Here's your modified LoginLayout code:

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap';
import { withRouter, Link } from 'react-router-dom'; // Import these routing tools

class LoginLayout extends Component {
  // Handle login logic + navigation (use this if you need to run checks before navigating)
  handleLogin = () => {
    // Add your login validation or API calls here first
    // Then navigate to your target page
    this.props.history.push('/dashboard');
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          {/* ... your existing card/input code stays here ... */}
          <Row>
            <Col xs="6">
              {/* Option 1: Use onClick + history (great for pre-navigation logic) */}
              <Button color="primary" className="px-4" onClick={this.handleLogin}>
                Login
              </Button>

              {/* Option 2: Wrap Button with Link (declarative, no extra logic needed) */}
              {/* <Link to="/dashboard">
                <Button color="primary" className="px-4">
                  Login
                </Button>
              </Link> */}
            </Col>
            <Col xs="6" className="text-right">
              {/* Use Link for the forgot password button too */}
              <Link to="/forgot-password">
                <Button color="link" className="px-0">Forgot password?</Button>
              </Link>
            </Col>
          </Row>
          {/* ... rest of your existing code ... */}
        </Container>
      </div>
    );
  }
}

// Wrap the component with withRouter to access routing props like history
export default withRouter(LoginLayout);

4. Set up your routes #

In your main app component (like App.js), define your routes using <Routes> and <Route> (for React Router v6):

import { Routes, Route } from 'react-router-dom';
import LoginLayout from './LoginLayout';
import Dashboard from './Dashboard';
import ForgotPassword from './ForgotPassword';

function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginLayout />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/forgot-password" element={<ForgotPassword />} />
    </Routes>
  );
}

export default App;

Quick note for React Router v6 users #

If you're using the latest v6, withRouter is no longer included by default. If you still want to use a class component, you can create a simple custom HOC to pass the navigate function, or convert your component to a function component and use the useNavigate hook instead (function components are more idiomatic in modern React!).

For example, converting to a function component:

import React from 'react';
import { Button, ... } from 'reactstrap';
import { useNavigate, Link } from 'react-router-dom';

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

  const handleLogin = () => {
    // Add login logic here
    navigate('/dashboard');
  }

  return (
    // ... same JSX as before, using handleLogin or Link
  );
}

export default LoginLayout;

That should resolve your navigation issues! Remember, always use React Router's tools for client-side navigation in React web apps—avoid plain <a> tags unless you specifically want a full page reload.

内容的提问来源于stack exchange，提问作者Jeff Bootsholz