react 自定义Link

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 自定义Link相关的知识,希望对你有一定的参考价值。

参考技术A to, ...props 解构赋值, 多次调用了 MenuLink 这个组件, 所以如果我们打印一下 to 的话, 会出现四个(因为被调用了四次)路径, 分别是 /, /activities, /topic, /login , 所以在这里把每一个 to 绑定在返回的 Route 上.

...props : 将在调用 MenuLink 的时候绑定的所有 props , 原封不动的放到返回的 Route 上.

children : 是 react-router 上的第三个可以用来渲染东西的方法, 路由相关的 props, 即(history, location, match) 都会被当做参数传递给这个方法. 在里面调用.

p.match ? 'active' : '' : 如果匹配上的路由, 添加 active 样式类. 注意, 在这里打印 p.match 的话是没有结果的, 结果是 null

模拟vue的tag属性,在react里实现自定义Link

我封装了一个简单的实现react里自定义Link的方法,方便大家使用。

 

因为普通组件没有metch、location、history等属性。只有在<Router>里面的<component>渲染的组件才有那三个属性。所以我定义了一个组件,写<Route>来是实现 自定义Link。
class
CustomNavLink extends Component{ render(){ return( <Route children={({match,location,history})=>{ return( <li onClink={this.goto.bind(this,history,props.to)}> //通过点击事件来进行跳转。我这里是<li>标签,你可以换成你需要的。 { location.pathname===thiss.props.to?">"+this.props.children:this.props.children //这里写标签里的内容,我这里是实现的是一个点击标签,给当前标签添加一个“>”来标识。 } </li> ) }} > ) } goto(history,to){ //模拟vue里的tag的点击事件 history.push(to) } }

 

这里是我引用上面组件的一个例子,大家可以参考一下。

class Home extends Component {
  render () {
    return (
      <div>
         <ul>
            <CustomNavLink to="/food">food</CustomNavLink>
            <CustomNavLink to="/wiki">wiki</CustomNavLink>
            <CustomNavLink to="/profile">profile</CustomNavLink>
        </ul>
        <Switch>
         <Redirect from="/" exact to="/food" />
         <Route path="/food" component={Food} />
         <Route path="/wiki" component={Wiki} />
         <Route path="/profile" component={Profile} />
         <Route component={Page404}/>
        </Switch>
     </div>
    )
  }
}

 



以上是关于react 自定义Link的主要内容,如果未能解决你的问题,请参考以下文章

为啥 react-router-dom 自定义路由不起作用?

导入使用 React-Router-Dom 的自定义模块组件时出现问题

AngularJs自定义指令详解 - link

AngularJS自定义Directive中link和controller的区别

在 PayPal Payflow Link 信用卡表单中创建自定义字段

如何写自定义 React Hook?