reactjs路由器-设置登录页面

Question

I'm trying to make a login page that would work as entry page for my app, and after user would input login and password, it would open main component with menu and content of the pages.

the problem that I can'r understand how to setup a router, or main app structure so it would work as I want. So far I can display a login component with main menu bar at the same time, or just a login page without working pages.

there is my router

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'))

my login page

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> 
    )
  }
}

and my 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>
      )
  }
}

I tried to make router to start from login component but in this case even address is changing in a browser window, there was no changes on the screen itself

I'm using react router 3.2 and react 15.6

Answer 1

first of all i will recommend you use react-router v4 cos that what i will be showing you. and v4 is beta than the older versions.

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>
    )
  }
}