react入门之旅6——Route之NavLink

路由之项目层级

路由组件，并不是放在components下，而是重新创建一个pages，所有路由组件都放这里

src

        components

                Component001

                        index.jsx

                        index.css

                ...

        pages

                Route-Component001

                        index.jsx

                        index.css

                ...

        App.jsx

        App.css

        index.js

        index.css

NavLink

该路由属性，相对于Link，给该路由链接class增加active。

这里涉及到前端一个知识点，标签a是跳转链接标签，其中class中的active是标准的高亮显示的样式。

如果不想使用active来展示样式，可以通过activeClassName属性来修改。

App.js

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

class App extends Component {
    render() {
        return (
            <div>
                <NavLink activeClassName="active-demo" to="/home">Home</NavLink><br/>
                <NavLink to="/about">About</NavLink>
                <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
            </div>
        );
    }
}

export default App;

App.css

.active{
    background-color: chocolate;
    color: aqua;
}

.active-demo{
    background-color: red;
    color: dodgerblue;
}

样式中创建了active和active-demo，运行发现About中展示的active样式，说明NavLink有默认样式active，Home展示的active-demo样式，这个是通过ActiveClassName实现的。

MyNavLink

App.js

import React, {Component} from 'react';
import Header from "./components/Header";
import MyNavLink from "./components/MyNavLink";
import {Route} from "react-router-dom"
import Home from "./pages/Home";
import About from "./pages/About";
import "./App.css"

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                <MyNavLink to="/home">Home</MyNavLink><br/>
                <MyNavLink to="/about" children="About"/>
                <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
            </div>
        );
    }
}

export default App;

pages

路由组件略

components

MyNavLink
 

import React, {Component} from 'react';
import {NavLink} from "react-router-dom";

class MyNavLink extends Component {
    render() {
        return (
            <NavLink {...this.props}/>
        );
    }
}

export default MyNavLink;

这里有一个新知识点，组件中间的那个value，它的key是children，注意看App中，home使用的正常的写法，about就是采用属性赋值的方法。