多人博客项目构建过程(四)

$npm install
$npm install react-router
$npm install react-router-dom

官网文档：https://reacttraining.com/react-router/web/guides/philosophy
基本例子：https://reacttraining.com/react-router/web/example/basic

#src/index.js
import React from ‘react‘;
import ReactDom from ‘react-dom‘;
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

ReactDom.render(<App />,document.getElementById(‘root‘));

登录页模板：https://codepen.io/colorlib/pen/rxddKy

<div class="login-page">
  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="#">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="#">Create an account</a></p>
    </form>
  </div>
</div>