A.js
import React, {Component} from 'react'; class A extends Component { render() { return ( <div> 这是A的内容!!!!!!!! </div> ); } } export default A;
B.js
import React, { Component } from 'react'; import { Link, Route ,Switch} from "react-router-dom"; import B1 from "./B1"; import B2 from "./B2"; class B extends Component { render() { return ( <div> <h2>我是B的内容</h2> <div> <ul> <li> <Link to="/B/B1">B1</Link> </li> <li> <Link to="/B/B2">B2</Link> </li> </ul> </div> <div> <Switch> <Route path="/B/B1" component={B1} /> <Route path="/B/B2" component={B2} /> </Switch> </div> </div> ); } } export default B;
B1.js
import React, {Component} from 'react'; class B1 extends Component { render() { return ( <div> <h3>这里是B1的列表!</h3> <ul> <li> B1.1 </li> </ul> </div> ); } } export default B1;
B2.js
import React, {Component} from 'react'; class B2 extends Component { render() { return ( <div> <h3>这里是B2的内容!!</h3> <ul> <li> B2.1 </li> </ul> </div> ); } } export default B2;
App.js
import React, { Component } from 'react'; import {BrowserRouter, Route, Link} from "react-router-dom"; import A from "./A"; import dataPage from "./B"; class App extends Component { render() { return ( <BrowserRouter> <h2>React路由的使用</h2> <div className="content"> <ul> <li> <Link to="/A">A</Link> </li> <li> <Link to="/B">B</Link> </li> </ul> </div> <div> <Route path="/A" component={A} /> <Route path="/B" component={dataPage} /> </div> </BrowserRouter> ); } } export default App;