react中操做react-router-dom路由

在src裏新建一個comsrctros再建兩個兩個文件夾，分別命名爲「pink」和「red」。文件夾命名爲

 

 

建一個路由組件文件夾，命名爲「pink」，裏面有一個rpink.js和pinkcss並編寫以下代碼

 

 

import  React  from 'react';

import "./pink.css"

class  Pink extends React.Component{

      render(){

            return(

                 <div  class="weibo">

                     <a>pink</a>

                 </div>

            )

      }

}

export  default Pink;

第二個頁面

import  React  from 'react';

import "./pink.css"

class  Red extends React.Component{

      render(){

            return(

                 <div  class="weibo">

                     <a>pink</a>

                 </div>

            )

      }

}

export  default Red;

detail.js

 

而後再新建一個路由組件文件夾，命名爲「Red」，裏面有一個red.js和red.css並編寫以下代碼：

而後 創建一個green  文件夾

經過函數跳轉

 

 

import React from 'react';

import { BrowserRouter, Route, Switch,Link } from "react-router-dom";

import "./green.css"

import Pink from '../Pink/Pink.js';

import Red from '../red/red.js';

import Routers from '../Router/Router.js';

class green extends React.Component {

    render() {

        return (

            <BrowserRouter>

                <div class="liulist">

                    <ul>

                        <li>

                            <Link to="/pink">首頁</Link>

                        </li>

                        <li>

                            <Link to="/red">詳情</Link>

                        </li>

                        <li>

                            <Link to="/routers">內容</Link>

                        </li>

                    </ul>

                </div>

                <Switch>

                    <Route path="/pink" exact component={Pink} />

                    <Route path="/red"exact  component={Red} />

                    <Route path="/routers"exact  component={Routers} />

                </Switch>

            </BrowserRouter>

        )

    }

}

export default green;

app.js中調用

 

 

import React from 'react';

import './App.css';

import Green from "./componter/green/green.js"

標籤名必須大寫

class App extends React.Component{

      render(){

        return(

             <div>

               <Green/>

               </div>

        )

      }

}

export default App;