React Router路由随笔

Posted 2020-11-26 guoyinsheng

1.安装以及基本使用

yarn add react-router-dom

基本结构:

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

//  this.props.history.push("/home/");
function AppRouter() {
  return (
    <Router>
      {/* <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/list/123">列表</Link>
        </li>
      </ul> */}
      <Route path="/" exact component={Index} />
      <Route path="/list/:id" component={List} />
    </Router>
  );
}

export default AppRouter;

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

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

二级导航

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from ‘./video/ReactPage‘
import Vue from ‘./video/Vue‘
import Flutter from ‘./video/Flutter‘


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default Video;

二级导航之后一级引入使用

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from ‘./Pages/Index‘
//--关键代码------------start
import Video from ‘./Pages/Video‘
//--关键代码------------end
import ‘./index.css‘

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    {/*--关键代码------------start*/}
                    <li><Link to="/video/">视频教程</Link> </li>
                    {/*--关键代码------------end*/}
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                 {/*--关键代码------------start*/}
                <Route path="/video/"   component={Video} />
                 {/*--关键代码------------end*/}
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;