We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
npm install react-router-dom --save
import './index.html'; import './styles/app.less'; import React from 'react'; import ReactDom from 'react-dom'; import App from './components/App.jsx'; import {BrowserRouter, Route} from 'react-router-dom'; ReactDom.render( <BrowserRouter> <Route path="/" component={App}/> </BrowserRouter> , document.getElementById('root') );
import React from 'react'; import Home from './Home'; import Login from './Login'; import {Route} from 'react-router-dom'; class App extends React.Component { componentDidMount() { const { location, history } = this.props; if (location.pathname === '/home' || location.pathname === '/') { history.replace('/home') } else if (location.pathname === '/login') { history.replace('/login') } } render() { return ( <div className="app"> <Route path="/home" component={Home}/> <Route path="/login" component={Login}/> </div> ) } } export default App;
import React from 'react'; import {matchPath} from 'react-router-dom'; import Header from './Header'; import Content from './Content'; import Sidebar from './Sidebar'; import {Layout} from 'antd'; export default class Home extends React.Component { constructor(props) { super(props); this.state = { collapsed: false }; this.ress = ['content01', 'content02', 'content03']; this.res = null; const match = matchPath(this.props.history.location.pathname, { path: '/home/:res' }); if (match) { this.res = match.params.res; } this.toggle = () => { this.setState({ collapsed: !this.state.collapsed }) }; } componentWillMount() { if (!this.res || !this.res.length || this.ress.indexOf(this.res) === -1) { this.props.history.replace(`/home/content01`) } } render() { return ( <Layout className="layout-app"> <Layout.Sider trigger={null} collapsible collapsed={this.state.collapsed} > <Sidebar res= {this.res}/> </Layout.Sider> <Layout> <Layout.Header style={{background: '#fff', padding: 0}}> <Header collapsed={this.state.collapsed} toggle={this.toggle} /> </Layout.Header> <Layout.Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}> <Content/> </Layout.Content> </Layout> </Layout> ) } }
import React from 'react'; import {Form, Icon, Input, Button, Checkbox} from 'antd'; const FormItem = Form.Item; class Logining extends React.Component { constructor(props) { super(props); this.handleSubmit = (e) => { const { history } = this.props; e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { if (values.userName === 'admin' && values.password === '123456') { history.replace('/home') } console.log('Received values of form: ', values); } }); } } render() { const { getFieldDecorator } = this.props.form; return ( <div className="login"> <Form onSubmit={this.handleSubmit} className="login-form"> <FormItem> {getFieldDecorator('userName', { rules: [{required: true, message: 'Please input your username!'}], })( <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="Username"/> )} </FormItem> <FormItem> {getFieldDecorator('password', { rules: [{required: true, message: 'Please input your Password!'}], })( <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password" placeholder="Password"/> )} </FormItem> <FormItem> {getFieldDecorator('remember', { valuePropName: 'checked', initialValue: true, })( <Checkbox>Remember me</Checkbox> )} <a className="login-form-forgot" href="">Forgot password</a> <Button type="primary" htmlType="submit" className="login-form-button"> Log in </Button> Or <a href="">register now!</a> </FormItem> </Form> </div> ); } } const Login = Form.create()(Logining); export default Login;
import React from 'react'; import {Menu, Icon} from 'antd'; import {NavLink} from 'react-router-dom'; export default class Sidebar extends React.Component { render() { const { res } = this.props; return ( <div className="layout-sidebar"> <div className="logo"/> <Menu theme="dark" mode="inline" defaultSelectedKeys={[res]} > <Menu.Item key="content01"> <NavLink to="/home/content01"> <Icon type="user"/> <span>nav 1</span> </NavLink> </Menu.Item> <Menu.Item key="content02"> <NavLink to="/home/content02"> <Icon type="video-camera"/> <span>nav 2</span> </NavLink> </Menu.Item> <Menu.Item key="content03"> <NavLink to="/home/content03"> <Icon type="upload"/> <span>nav 3</span> </NavLink> </Menu.Item> </Menu> </div> ) } }
import React from 'react'; import {Route} from 'react-router-dom'; import Content01 from './content01'; import Content02 from './content02'; import Content03 from './content03'; export default class Content extends React.Component { render() { return ( <div> <Route path="/home/Content01" component={Content01}/> <Route path="/home/Content02" component={Content02}/> <Route path="/home/Content03" component={Content03}/> </div> ) } }
<!DOCTYPE html> <html lang="en"> <head> <base href="/"> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div id="root"></div> <script src="./app.js"></script> </body> </html>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
配置使用router
安装react-router
修改/app/app.js
修改/app/component/App.js
添加/app/component/home/Home.js
添加/app/component/login/Login.js
修改/app/component/layout/Sidebar.js
修改/app/component/layout/Content.js
修改/app/index.html
The text was updated successfully, but these errors were encountered: