react路由的简单例子2

这个和我上一篇文章是差不多的，只不过这里的组件都不是无状态组件

Test.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from '../pages/Index'
import List from './List'
class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <Router>
          <ul>
            <li>
                <Link to="/">首页</Link>
            </li>
            <li>
                <Link to="/list/">列表</Link>
            </li>
            <Route path="/" exact component={Index}></Route>
            <Route path="/list/" exact component={List}></Route>
          </ul>
        </Router>
      </div>
    );
  }
}

export default Test;

Index.js

import React, { Component } from 'react';
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                index
            </div>
         );
    }
}
 
export default Index;

List.js

import React, { Component } from 'react';
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                list
            </div>
         );
    }
}
 
export default List;