reactjs路由器-設置登錄頁面

Question

我正在嘗試制作一個登錄頁面，該頁面可用作我的應用程序的輸入頁面，並且在用戶輸入登錄名和密碼后，它將打開包含菜單和頁面內容的主要組件。

我無法理解如何設置路由器或主應用程序結構的問題，這樣它就可以按我的意願工作。 到目前為止，我可以同時顯示帶有主菜單欄的登錄組件，或者僅顯示沒有工作頁面的登錄頁面。

有我的路由器

import React from 'react'
import ReactDOM from 'react-dom' 
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
import App from './App'
import LoginPage from './pages/login'
import Forms from './pages/Forms'
import Home from './pages/Home'

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path ="/" component={App}>
      <IndexRoute component={LoginPage} />
      <Route exact path='/LoginPage' component={LoginPage} />
      <Route exact path='/App' component={App} />
      <Route exact path='/Home' component={Home} />
      <Route exact path='/Forms' component={Forms} />
    </Route>   
  </Router>, document.getElementById('root'))

我的登錄頁面

import React, { Component } from 'react'
import { Link } from "react-router"
import logo from './logo.jpg';

export default class LoginPage extends Component {
  render() {
    return (
        <div className="login-page">
            <div className="login-form-cont">
                <div style={{paddingBottom:'10px'}}> <img src={logo} width="270" height="54" /> </div>
                <form className="login-form">
                    <input type="text" placeholder="username"/>
                    <input type="password" placeholder="password"/>
                    <Link to={`/Home`}> 
                        <button> login </button>  
                    </Link>
                </form>
            </div>
        </div> 
    )
  }
}

和我的app.js

import React, { Component } from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import classnames from 'classnames'
import SideBarMenu from './components/SidebarMenu'

export default class App extends Component {
    constructor(props){
    super(props)
    this.state = {open: false}
  }

  render() {
  return (

      <MuiThemeProvider muiTheme={muiTheme}>
      <div >
          <SideBarMenu/>
          <div className={classnames('app-content')}>
              { this.props.children }
          </div>
      </div>
      </MuiThemeProvider>
      )
  }
}

我試圖使路由器從登錄組件開始，但是在這種情況下，即使瀏覽器窗口中的地址發生了變化，屏幕本身也沒有變化

我正在使用React Router 3.2和React 15.6

Answer 1

首先，我將建議您使用react-router v4 cos，我將向您顯示。 並且v4是較舊版本的beta版本。

import { BrowserRouter, Switch, Route } from 'react-router-dom';

export default class App extends Component{
  render(){
    return (
     <BrowserRouter>
        <Switch>
           <Route exact path="/" component={Login}/>
           <Route exact path="/Home" component={Home}/>
           <Route exact path="/Dashboard" component={Dashboard} />
           <Route exact path="/Dashboard/:userId" component={Dashboard}/>
           <Route component={NotFound}/>
        </Switch>
      </BrowserRouter>
    )
  }
}