剧场模式
首页React & Redux 实现注册登录认证系统

React & Redux 实现注册登录认证系统 #4 页面与路由搭建

下载源码hfpp2012发布于1257 次点击播放时长:08:35
1

http://getbootstrap.com/docs/4.1/examples/navbars/

http://www.bootcdn.cn/

<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">

client/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import NavigationBar from './components/NavigationBar';
import registerServiceWorker from './registerServiceWorker';

import logger from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';

import { BrowserRouter as Router } from 'react-router-dom';
import routes from './routes';

import { createStore, applyMiddleware } from 'redux';

import rootReducer from './reducers';

import { Provider } from 'react-redux';

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(thunk, logger)
  )
);

ReactDOM.render(
  <Provider store={ store }>
    <Router routes={ routes }>
      <div>
        <NavigationBar />
        { routes }
      </div>
    </Router>
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

client/src/routes.js

import React from 'react';

import { Route } from 'react-router-dom';

import App from './components/App';

import SignupPage from './components/signup/SignupPage';

export default (
  <div className="container">
    <Route exact path="/" component={ App } />
    <Route path="/signup" component={ SignupPage } />
  </div>
)

client/src/components/NavigationBar.js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class NavigationBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-light bg-light mb-3">
        <div className="container">
          <Link className="navbar-brand" to="/">ReduxLogin</Link>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarsExample05">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item">
                <Link className="nav-link" to="/signup">Sign Up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

export default NavigationBar;

client/src/components/signup/SignupPage.js

import React, { Component } from 'react';

class SignupPage extends Component {
  render() {
    return (
      <div>
        <h1>Signup Page</h1>
      </div>
    );
  }
}

export default SignupPage;

client/src/components/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="jumbotron">
        <h1>Hi</h1>
      </div>
    );
  }
}

export default App;
0 条回复
暂无回复~~
播放列表目录
你也想拥有自己的网站,并成为一名自由的讲师吗?
扫码打赏 16.8 元起加我微信拉入微信群

加我微信:15014006126

加 QQ 群:697272886

打赏的朋友或 Pro 学员获得特权

  • 加我微信拉你进微信群,享有更多互动和人脉资源;

  • 和程序员老兵我成为微信好友;

  • 不定期技术分享和视频问题解答

相似的视频

© Rails365 | 隐私条款 | 服务条款 | 加盟本站 | 粤ICP备15004902号 | 在线学员:10

Top