Javascript reactjs路由器-设置登录页面
我正在尝试创建一个登录页面,作为我的应用程序的入口页面,在用户输入登录名和密码后,它将打开带有菜单和页面内容的主组件 问题是,我无法理解如何设置路由器或主应用程序结构,以便它能够按照我的意愿工作。到目前为止,我可以同时显示一个带有主菜单栏的登录组件,或者只显示一个没有工作页面的登录页面 这是我的路由器Javascript reactjs路由器-设置登录页面,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我正在尝试创建一个登录页面,作为我的应用程序的入口页面,在用户输入登录名和密码后,它将打开带有菜单和页面内容的主组件 问题是,我无法理解如何设置路由器或主应用程序结构,以便它能够按照我的意愿工作。到目前为止,我可以同时显示一个带有主菜单栏的登录组件,或者只显示一个没有工作页面的登录页面 这是我的路由器 import React from 'react' import ReactDOM from 'react-dom' import {Router, Route, IndexRoute, has
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'))
从“React”导入React
从“react dom”导入react dom
从“react Router”导入{Router,Route,IndexRoute,hashHistory}
从“./App”导入应用程序
从“./pages/login”导入登录页
从“./pages/Forms”导入表单
从“./pages/Home”导入主页
ReactDOM.render(
,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>
)
}
}
import React,{Component}来自“React”
从“反应路由器”导入{Link}
从“/logo.jpg”导入徽标;
导出默认类LoginPage扩展组件{
render(){
返回(
登录
)
}
}
还有我的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>
)
}
}
import React,{Component}来自“React”
从“材质ui/样式/MuiThemeProvider”导入MuiThemeProvider
从“材质ui/styles/getMuiTheme”导入getMuiTheme
从“classnames”导入类名
从“./components/SideBarMenu”导入SideBarMenu
导出默认类应用程序扩展组件{
建造师(道具){
超级(道具)
this.state={open:false}
}
render(){
返回(
{this.props.children}
)
}
}
我试图让路由器从登录组件开始,但在这种情况下,即使地址在浏览器窗口中发生变化,屏幕本身也没有变化
我使用的是react router 3.2和react 15.6,首先,我建议您使用react router 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>
)
}
}
从'react router dom'导入{BrowserRouter,Switch,Route};
导出默认类应用程序扩展组件{
render(){
返回(
)
}
}
如果我只想在登录组件上显示表单,而在其他“页面”中显示侧栏菜单,该怎么办?这将是什么样的结构?