w22 的 blog 教學加上 router

about\About.css

.about {
  background: rgba(0, 255, 0 , 0.3);
  min-height: calc(100vh - 74px);
}

.about > div {
  font-size: 36px;
  margin: 10px;
}

about\index.js

import React, { Component } from 'react';
import './About.css';

class About extends Component {
  render() {
    return (
      <div className="about">
        <div>About</div>
        <div>hello</div>
      </div>
    );

  }
}

export default About;

App.css

.App {
  text-align: center;
}

.page {
  margin-top: 74px;
}

App.js

import React, { Component } from 'react';
import './App.css';
import Nav from './nav';
import About from './about';
import Home from './home';
import PostList from './post_list';
import Post from './post';
import { BrowserRouter as Router, Route } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App" >
          <Nav />
          <div className="page">
            <Route exact path="/" component={Home} />
            <Route exact path="/post" component={PostList} />
            <Route path="/about" component={About} />
            <Route path="/post/:postId" component={Post} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

home\index.js

import React, { Component } from 'react';
import './home.css';

const style = {
  homepage: {
    fontSize: '40px',
    paddingTop: '10px',
  }
}

class Home extends Component {
  render() {
    return (
      <div className="home">
        <div style={style.homppage}>I am homepage</div>
      </div>
    );

  }
}

export default Home;

nav\index.js

import Nav from './Nav';

export { Nav as default} 

nav\Nav.css

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #bbbbbb;
  opacity: 0.8;
  z-index: 2;
}

.nav__list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-left: 20px;
}

.nav__list li {
  display: inline-block;
  margin-right: 16px;
  background: rgba(255, 0, 0, 0.3);
  padding: 10px;
  transition: background 0.3s;
  cursor: pointer;
}

.nav__list a {
  text-decoration: none;
  color: black;
}

.nav__list li:hover {
  background: rgba(255, 0, 0, 0.5);
}

.nav__list .active {
  background: rgba(255, 0, 0, 0.5);
}

nav\Nav.js

import React, { Component } from 'react';
import './Nav.css';
import { Link, Route } from "react-router-dom";

class Item extends Component {
  render() {
    const { to, text, exact } = this.props;
    return (
      <Route
        path={to}
        exact={exact}
        children={({ match }) => (
          <Link to={to}>
            <li className={match ? "active" : ""}>
              {text}
            </li>
          </Link>
        )}
      />
    )
  }
}

class Nav extends Component {
  render() {
    return (
      <nav className="nav" >
        <ul className="nav__list">
          <Item to='/' exact={true} text='Home' />
          <Item to='/post' text='文章列表' />
          <Item to='/about' text='關於本站' />
        </ul>
      </nav>
    );
  }
}

export default Nav;

post\index.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

class Post extends Component {
  constructor(props) {
    super(props);
    this.state = {
      post: {},
    }
  }

  componentDidMount() {
    const { postId } = this.props.match.params;
    axios.get('https://jsonplaceholder.typicode.com/posts/' + postId)
      .then(res => {
        this.setState({
          post: res.data,
        })
      })
  }

  render() {
    const { post } = this.state;
    return (
      <div>
        <h1>POST</h1>
        <Link to="/post"><button> back</button> </Link>
        <div>
          <h1>{post.title ? post.title : 'Loading'}</h1>
          <p>{post.body}</p>
        </div>
      </div>
    );

  }
}

export default Post;

post_list\index.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios'
import './Post.css';

class PostList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
    }
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        this.setState({
          posts: res.data,
        })
      })
  }

  render() {
    const { posts } = this.state;
    const { history } = this.props;
    return (
      <div>
        <h1>POST</h1>
        <div className="post-list">
          {posts.map(post => (
            <div className="post-item" key={post.id}>
              <div className="post-item__id" onClick={() => {
                history.push("/post/" + post.id)
              }}>{post.id}</div>
              <div className="post-item__title"> {post.title}</div>
              <div className="post-item__body">{post.body}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default withRouter(PostList);

post_list\Post.css

.post-list {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-left: 10px;
}

.post-item {
  position: relative;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 0, 0.1);
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.post-item__id {
  position: absolute;
  left: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
}

.post-item__title {
  margin-top: 15px;
  font-size: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}