React.js如何在路由文件中注册多个路由

Question

我对React.js很新。

我正在尝试使用React路由器构建一个非常简单的应用程序。

当有人点击登录按钮时，它应该路由到组件 Inside.js

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

  onClick(){
    // alert("Hello World!")
    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;

目前我不想使用 Redux 和中间件来处理身份验证。我只需要将它路由到Inside.js组件。

这是我 Routes.js 这里我如何定义/Inside路由器路径。

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}/>
    </Route>
    // <Route path={'/Inside'} component={Inside}>
    // </Route>
)

谢谢！

Answer 1

您可以将路线组合为

<Route>
    <Route component={App}>
        <Route path='/' component={Welcome} />
        <Route path='Inside' component={Inside} />
    </Route>
  </Route>

Answer 2

对于React JS应用程序中的路由，我更喜欢使用react-router-dom，它方便易用，您也可以在React本机应用程序中使用相同的概念进行路由。

节点模块：https://www.npmjs.com/package/react-router-dom

启动并运行指南：https://reacttraining.com/react-router/web/example/basic

希望这会有所帮助，欢呼：）