React.js中如何在路由文件注册多路由？新手跳转需求求助

Hey there! Let's get your login button routing to the Inside.js component working smoothly. Here's what you need to adjust:

1. Correct Your Route Configuration #

First, you had the /Inside route commented out in Routes.js — we need to add it back as a child route of your root App component so React Router knows where to send users when they navigate to that path.

Update your Routes.js like this:

import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './components/App/App';
import Welcome from './components/Welcome/welcome';
import Inside from './components/Inside/inside';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Welcome}/>
    {/* Add the /Inside route here as a child of the root App route */}
    <Route path="/Inside" component={Inside} />
  </Route>
)

2. Fix the onClick Method Binding in Welcome Component #

Right now, your onClick method isn't properly bound to the component instance. While browserHistory is imported globally, it's still a React best practice to ensure this refers to your component (and prevents unexpected bugs later).

You can fix this in one of two ways:

Option A: Use an Arrow Function for the Handler #

Arrow functions automatically bind this to the component instance:

import React, { Component } from "react";
import styles from "./welcome.css";
import { browserHistory } from 'react-router'; // No need to import Router here since you don't use it in the component

class Welcome extends Component {
  // Arrow function auto-binds `this`
  onClick = () => {
    browserHistory.push('/Inside');
  }

  render() {
    return (
      <div id="main">
        <div id="welcome">
          <div>
            <input type="text" />
          </div>
          <div>
            <input type="password" />
          </div>
          <div>
            <input type="checkbox" />Remember me
          </div>
          <div>
            <button type="button" onClick={this.onClick}>Login</button>
          </div>
        </div>
      </div>
    );
  }
}

export default Welcome;

Option B: Bind the Method in the Constructor #

If you prefer traditional function syntax, bind the handler in the component constructor:

import React, { Component } from "react";
import styles from "./welcome.css";
import { browserHistory } from 'react-router';

class Welcome extends Component {
  constructor(props) {
    super(props);
    // Bind the onClick method to the component instance
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    browserHistory.push('/Inside');
  }

  render() {
    // ... rest of your render code stays the same
  }
}

export default Welcome;

3. Double-Check Your Entry File (e.g., index.js) #

Make sure your root entry file is rendering the Router component correctly with browserHistory and your routes:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './Routes';

ReactDOM.render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('root') // Make sure this matches your HTML root element ID
);

That's it! Now when you click the Login button, you should be routed to the Inside component without any issues.

内容的提问来源于stack exchange，提问作者margherita pizza