react-router之之自定义链接

根据react-router文档中的案例进行自我的理解。   （ps: 没办法，初学react，英文又太烂 （捂脸））;

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter,
    Switch
} from 'react-router-dom'
import './App.css';
const Home = () => (
    <div>
        <h2>Home</h2>
    </div>
);
const About = () => (
    <div>
        <h2>About</h2>
    </div>
);

const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact}) => (
    <Route path={to} exact={activeOnlyWhenExact}
           children={({ match }) => (
               console.log(match),
        <div className={match ? 'active' : ''}>
            {match ? '> ' : ''}<Link to={to}>{label}</Link>
        </div>
    )}/>
);

class App extends Component {
  render() {
    return (
        <Router>
            <div>
                <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="Home" />
                <OldSchoolMenuLink to="/about" label="about" />
                <hr/>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </div>
        </Router>
    );
  }
}
export default App

理解：

　　1.  App组件 ：  App组件中<Router>中  其实我们大多数都了解的不少了，  可是咋一看 Link标签怎么不见了 只剩下所知道的 to=""   label是什么？ activeOnlyWhenExact是什么？  

　　根据我们的标题其实一眼就看穿了  OldSchoolMenLink 就是个自定义链接

　　2. 好  让我们看看 OldSchoolMenLink组件里面的代码吧

const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact}) => (
    <Route path={to} exact={activeOnlyWhenExact}
           children={({ match }) => (
               console.log(match),
        <div className={match ? 'active' : ''}>
            {match ? '> ' : ''}<Link to={to}>{label}</Link>
        </div>
    )}/>
);

 

　　先看 箭头函数里面的参数  { label,to,activeOnlyWhenExact } 这仨个在下面代码是什么  

　   在 Route 里面 path={to} 代表了 to是 路由匹配路径  exact={activeOnlyWhenExact}  activeOnlyWhenExac为true   ==  exact={true}

　　<OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="Home" />  则和 <Link to={to}>{label}</Link>  对应 ， 则label就很明白了。

　　3. <div className={match ? 'active' : ''}>{match ? '> ' : ''}<Link to={to}>{label}</Link> </div>  中  match为true时 加个>  ，  match里有个参数 match.isExact.返回布尔值，如果准确（没有任何多余字符）匹配则返回true。 所以我认为 match？判断  应该是 match.isExact为判断  match?是简写了的。  当然这是我自己的个人理解，我还在踩坑中 错了的话会及时更正的。

 

以上就是react-router中自定义链接理解，很简单，但为什么要写出来？  初学react，很多东西不是很懂也不熟练，所以也算是好记性不如烂笔头吧。