React-Router实战：基本路由、路由传参、嵌套路由

安装

> npm install -g create-react-app
> create-react-app demo-app
> cd demo-app

> npm install react-router-dom

---

一、基本路由（Dome1）

---

1、目录及 组件关系图

目录结构：

组件关系：

2、源码

./index.js

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

ReactDOM.render(<App />, document.getElementById('root'));

./src/components/App/App.js

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from '../Home/Home';
import About from '../About/About';
import Inbox from '../Inbox/Inbox';

function App() {
  return (
    <Router>
      <div>  
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about/">About</Link></li>
          <li><Link to="/inbox/">Inbox</Link></li>
        </ul>
        <Route path="/" exact component={Home} />
        <Route path="/about/" component={About} />
        <Route path="/inbox/" component={Inbox} />
      </div>
    </Router>
  );
}

export default App;

<