React.js如何在路由文件中注冊多個路由

Question

我對React.js非常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

希望這會有所幫助，加油:)