React-Router实战：NavLink

基础：

• （1）引入使用：

import { NavLink } from 'react-router-dom'
 About  

• （2）activeClassName：string

//当被激活时，显示类名为selected 的css样式


  About

• （3）activeStyle：object

// 在元素处于活动状态时应用于该元素的样式。


  about

• （4）exact: 精确匹配

//仅当url与NavLink里to的值完全相等时，才应用类名为selected的CSS样式


  About

• （5）isActive: ：function

//用于添加额外逻辑以确定链接是否处于活动状态的功能。
//如果您要做的不仅仅是验证链接的路径名是否与当前URL匹配，那么应该使用此方法

const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

Event 123

---

DOME

目录结构：

目录结构：
		| - index.js
		| - components
			| - App 
				| - App.js
				| - App.css
			| - Home     =>   Home.js
			| - About    =>   About.js

源码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';

ReactDOM.render(, document.getElementById('root'));

./components/App/App.js

import React , { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Home from '../Home/Home';
import About from '../About/About';
import './App.css';

class App extends Component {
  render() {
    return (
      
        

          Home  

          About
          
          
        
      
    );
  }
}

export default App;

./components/App/App.css

a {
    background: #000;
    color: #fff;
    text-decoration: none;
}

.test {
    background: red;
}

./components/About/About.js

import React, { Component } from 'react';
export default class About extends Component {
    render() {
        return (
            
i am About
        );
    }
}

./components/Home/Home.js

import React, { Component } from 'react';

export default class Home extends Component {
    render() {
        return (
           
Home
        );
    }
}

展示：