React webapp路由跳转

React webapp路由跳转

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

 

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

   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(
     
   
         {/* //容器盒子 */}
   
         
         
       
       
     
   ,
     document.getElementById('root')
   );
   serviceWorker.unregister();
   

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

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(
               
   
                   
                   
   
                       
                       
                       
                       
                       
                       
                       
                       
                   
               
               
           )
       }
   }
   
   
   export default Routes

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

   import React, { Component }  from 'react';
   import {NavLink}  from  'react-router-dom';
   
   class bottomTab extends Component{
       constructor(){
           super();
           this.state={
   
           }
       }
       render(){
           return(
               
   
                   Home
                   Sort
                   Surprise
                   shopCar
                   Mine
               
           )
       }
   }
   
   export default bottomTab;