React 免费教程 （六）路由。

npm install --save react-router-dom

Roter就是判断下路径然后根据路径来显示和不显示相关的组件。

<Route path="/list/:id" exact component={List} />   表示 如果path是这样的，就显示List这个组件

 

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import List from './List' 

class AppRouter extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() {  
      return ( 
        <Router>
            <ul>
                <li><Link to="/">列表</Link></li>
                <li><Link to="/list/123">传值</Link></li>
            </ul>
            <Route path="/list/:id" exact component={List} /> 
        </Router>

      );
    }
}
 
export default AppRouter;

import React, { Component } from 'react';
class List extends Component {
    constructor(props) {
        super(props);
        console.log(props)  //这两处都可以获取到传值
        this.state = {  }
    }
    componentDidMount(){
        //这两处都可以获取到传值
        // console.log(this.props.match.params.id)
        let tempId=this.props.match.params.id
         this.setState({id:tempId })
     }
     
    render() { 
        return ( <h2>List-page</h2> );
    }
}
 
export default List;

import { Link , Redirect } from "react-router-dom";
 <Redirect to="/home/" />

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>

            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }

            </div>
          </div>
      </Router>
    );
  }


  export default AppRouter;