欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react简单的路由demo(react-router-dom4.3.1)

程序员文章站 2022-07-03 15:24:10
...

效果图: 

 react简单的路由demo(react-router-dom4.3.1)

import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter as Router,Route,NavLink,Switch} from 'react-router-dom'
import RouterDemoOne from './RouterDemoOne'
import RouterDemoTwo from './RouterDemoTwo'
import RouterDemoThree from './RouterDemoThree'
import  './style.css'
const App = () => (
    <Router>
        <div>
            <h2>路由Demo</h2>
            <header>
                <nav>
                    <ul className="header">
                        <li><NavLink exact to="/">首页</NavLink></li>
                        <li><NavLink to="/two">说说</NavLink></li>
                        <li><NavLink to='/three'>日志</NavLink></li>                     
                    </ul>
                </nav>
            </header>
            <Switch>
              <Route exact path="/" component={RouterDemoOne}/>
              <Route path="/news" component={RouterDemoTwo}/>
              <Route path="/course" component={RouterDemoThree}/>
            </Switch>
        </div>
    </Router>
)

ReactDom.render(
    <App />,
    document.getElementById('root')
)

style.css

.header{
   list-style:none;
   height: 40px;
   line-height: 40px;
   background: #000;
   color: #fff   
}
.header li{
    background: #000;
    float: left;
    width: 100px;
    text-align: center
}
.header li a{
   color:#fff;
   text-decoration: none
}
.active{
   background-color: dodgerblue;
   display: block;
   height: 40px;
   line-height: 40px;
}