React webapp路由跳转

React webapp路由跳转

1. Router下面只能包含一个盒子标签，类似这里的div。
   Link,NavLink代表一个链接，相当于一个a标签。需要有一个to表示地址。
   Route，代表路由界面，path代表路径，component代表路径所对应的界面。
2. 项目入口 》Router包括路由组件和底部菜单组件 》 路由组件里面引入所有需要用到的路由(<Route>)，底部菜单用<Link>组件进行跳转。

 

1. 工程创建完成后修改根目录index.js文件，使其不再针对默认的<APP>组件，使其指向我们创建的路由组件。  结构为一个<Router>标签，包含一个路由组件一个底部标签

   import React from 'react';
   import ReactDOM from 'react-dom';
   import {BrowserRouter as Router }  from  'react-router-dom';
   import './index.css';
   // import App from './App';  //之前的路由
   
   import Routes from './router';    //替换路由
   import Bottomtab from './page/bottomtab';    //底部
   import * as serviceWorker from './serviceWorker';
   
   ReactDOM.render(
     <div>
       <Router>  {/* //容器盒子 */}
   
         <Routes></Routes>
         <Bottomtab></Bottomtab>
       
       </Router>
     </div>,
     document.getElementById('root')
   );
   serviceWorker.unregister();
   

2. 创建路由文件，将需要的组件一一引入。底部菜单组件不需要引入，这里面只是用<Route>组件。

3. import React,{Component} from 'react';
   import {Route}  from  'react-router-dom';
   
   import Home from '../src/page/home/home';  
   import App from './App';    
   import Sort from '../src/page/sort/sort';  
   import Surprise from '../src/page/surprise/surprise';  
   import shopCar from '../src/page/shopCar/shopCar';  
   import Mine from '../src/page/mine/mine';   
   import TestModule from './page/testmodule/testmodule';  
   
   class Routes extends Component{
       render(){
           return(
               <div className="wrapper" >
                   
                   <div className='routes-list' style={{height:'100%'}}>
                       <Route exact path='/App' component={App} ></Route>
                       <Route exact path='/Home' component={Home}></Route>
                       <Route exact path='/' component={App}></Route>
                       <Route exact path='/Sort' component={Sort}></Route>
                       <Route exact path='/Surprise' component={Surprise}></Route>
                       <Route exact path='/shopCar' component={shopCar}></Route>
                       <Route exact path='/Mine' component={Mine}></Route>
                       <Route exact path='/TestModule' component={TestModule}></Route>
                   </div>
               
               </div>
           )
       }
   }
   
   
   export default Routes

4. 创建底部菜单组件 ，其中只使用<NavLink>组件 <Link>组件也可以。

   import React, { Component }  from 'react';
   import {NavLink}  from  'react-router-dom';
   
   class bottomTab extends Component{
       constructor(){
           super();
           this.state={
   
           }
       }
       render(){
           return(
               <div className='routes-list'>
                   <NavLink to="/Home">Home</NavLink>
                   <NavLink to="/Sort">Sort</NavLink>
                   <NavLink to="/Surprise">Surprise</NavLink>
                   <NavLink to="/shopCar">shopCar</NavLink>
                   <NavLink to="/Mine">Mine</NavLink>
               </div>
           )
       }
   }
   
   export default bottomTab;