reactjs router - 로그인 페이지 설정

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

있다 브라우저 윈도우에서 주소가 변경되는 경우 화면 자체에 변경 사항이 없습니다

나는 라우터 3.2 반응하고 난 당신이 내가 당신을 보여주는 것입니다 무슨 왜냐하면 V4 - 라우터 반응을 사용하는 것이 좋습니다 모든의 15.6

Answer 1

먼저 반응 사용하고 있습니다. v4는 이전 버전보다 베타 버전입니다.

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