轻松学 React-Router 4 #01 介绍

https://github.com/ReactTraining/react-router

https://reacttraining.com/react-router/web/guides/quick-start 文档

https://nodejs.org/en/

https://github.com/facebook/create-react-app

https://www.rails365.net/movies/react-ji-qiao-3-react-router-jiao-cheng-part react 技巧 #3 react-router 教程 part 1

https://www.rails365.net/movies/react-ji-qiao-4-react-router-jiao-cheng-part react 技巧 #4 react-router 教程 part 2

• src/App.js
• src/About.js
• src/Vip.js

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import About from './About';
import Vip from './Vip';

import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <Route path="/" component={ Vip } />
          <Route path="/about" component={ About } />
          <Route path="/vip" component={ Vip } />
        </div>
      </Router>
    );
  }
}

export default App;

src/About.js

import React from 'react'

const About = () => {
  return (
    <div> About Page </div>
  )
}

export default About

src/Vip.js

import React from 'react'

const Vip = () => {
  return (
    <div> Vip Page </div>
  )
}

export default Vip