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を使用しており、反応します15.6

Answer 1

最初に反応ルータv4を使用することをお勧めします。 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> 
    ) 
    } 
}