React路由(模塊化)

1.安裝路由

npm install react-router-dom --save

app.js引入路由
import { BrowserRouter as Router, Route, Link } from “react-router-dom”;
其他頁面也需要頁面跳轉時，也需要引入。

import React,{Component} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import routes from './router/route'
import '../src/assets/css/App.less';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      
     };
  }
 
  render(){
    return (
      <div className="App">
          <Router>
            <div className='header'>
                <Link to='/'>首頁</Link>
                <Link to='/cty'>我的cty</Link>
            </div>
          	  **// 嵌套路由，暫時沒用上。**
                {/* {
                  router.map((item,key)=>{
                        if(item.exact){
                          return <Route key={key} exact path={item.path} render={props=>( 
                                    <item.component {...props} routes={item.routes} />
                            )}> 
                          </Route>
                        }else{
                          return <Route key={key}  path={item.path} render={props=>( 
                                    <item.component {...props} routes={item.routes} />
                            )}> 
                        </Route>
                        }
                  })
                } */}
                // 上下哪一種都可以
                {
	                 routes.map((route,key)=>{
	                   if(route.exact){
	                     return <Route key={key} exact path={route.path} component={route.component} /> 
	                   }else{
	                    return <Route key={key}  path={route.path} component={route.component} /> 
	                   }
	                 })
                }
          </Router>
    </div>
    )    
  }
}

export default App;

新建一個route.js文件

import Home from '../components/Home'     // 每個頁面
import Cty from '../components/Cty'
import Reactfrom from '../view/Reactform/Reactform'
import News from '../components/News'
import Plumis from '../view/plumis/Plumis'
import Getdata from '../view/getdata/Getdata'

const routes = [
    {
       path:'/',
       component: Home,
       exact:true,
    },
    {
      path:'/cty',
      component: Cty,
    },
    {
      path:'/reactfrom',
      component: Reactfrom,
    },
    {
      path:'/news',
      component: News,
    },
    {
      path:'/plumis/:uid',  // 動態路由
      component:Plumis,
    },
    {
      path:'/getdata',
      component:Getdata,
    },
  
]

export default routes;

下面我們就可以實現路由的跳轉了
如果有問題，可以加我微信一起討論，我們一起進步！
屏幕前的你，加油！