react 路由跳转 底部tab切换

routers.js文件

import React, { Component } from 'react'
import { BrowserRouter as Router, Route ,Switch} from 'react-router-dom'
import Ask from "../pages/ask"
import Find from "../pages/find"
import Index from "../pages/index"
import My from "../pages/my"
import Others from "../pages/others"
import Tab1 from "../pages/others/tab1"
import Tab2 from "../pages/others/tab2"
export default class index extends Component {
    render() {
        return (
            <div className="colors">
            <Router>
                <Switch>
                        <Route path="/" exact component={Index}></Route>
                        <Route path="/ask"  component={Ask}></Route>
                        <Route path="/my"  component={My}></Route>
                        <Route path="/others"  component={Others}></Route>
                        <Route path="/find"  component={Find}></Route>
                       

                </Switch>
          </Router>
        {  /*  */}
                
                
            </div>
        )
    }
}

App.js文件

import React from 'react';
import Routers from "./routers"//引入routers文件
function App() {
  return (
    <div className="App">
          <div className="content_routers">
                  <Routers></Routers>
          </div>
          
    </div>
  );
}

export default App;

index.js页面

import React, { Component } from 'react'
import {  NavLink } from 'react-router-dom'
export default class index extends Component {
    render() {
        return (
            <div className="indexs">
                <div className="tops">
                </div>
                <ul className="content_li">
                    <li><NavLink exact to="/">首页</NavLink></li>
                    <li><NavLink to="/others">附近</NavLink></li>
                    <li><NavLink to="/find">发现</NavLink></li>
                    <li><NavLink to="/ask">订单</NavLink></li>
                    <li><NavLink to="/my">我的</NavLink></li>
                </ul>
            </div>
        )
    }
}

react 路由跳转 底部tab切换