React基础入门(路由传参,NavLink,redux) --第三篇

NavLink的介绍

他可以实现路由的高亮,NavLink比Link高级一点,他自身有一个属性点击哪个路由就会自动给点击的那个路由添加一个类名为active的属性,如果不喜欢这个样式,也可自行用activeClassName给他添加一个自定义的类名,注意:这里如果使用bootStrop的情况,因为普通的类权重低,所以样式会被bootstarp覆盖,这里加上! important就ok了.

<NavLink activeClassName="atdh" to="/Home">home跳转</NavLink>--
<NavLink activeClassName="atdh" to="/Login">Login跳转</NavLink>
{
   /* exact 精确模式,只会匹配路径名相同的那个组件 */}
<Route exact path="/Home" component={
   Home}></Route>
<Route path="/Login" component={
   Login}></Route>

通过this.props.children可以拿到标签体的内容

Switch是什么?

举个例子:如果现在有两个路由,一个Login路由组件,一个About路由组件,如下方代码,Login路由的路径与About路由的路径都是Login,那么会显示哪一个?可能有人觉得会显示About路由,但是不是,他两个都会匹配到并且渲染出来,这种机制是React中的模糊查询,如果我们只想显示Login组件,可以使用Switch组件包住,他就会去做一个查找,只会匹配到第一个符合的,渲染出来,下面再多相同的都不会去查找

<Switch>
    <Route exact path="/Home" component={Home}></Route>
    <Route path="/Login" component={Login}></Route>
    <Route path="/Login" component={About}></Route>
</Switch>

Redirect是什么?

redirect:重定向

一般都放在Switch组件中,并且必须放在Switch的最后一行

<Switch>
            {
   /* <Route path="/" exact component={NewsPage}  /> */}
            <Route path="/my" component={
   MyPage} />
            <Route path="/news" component={
   NewsPage}  />
            <Route path="/novel" component={
   NovelPage} />
            {
   /* 含义:
              1.如果以上path路径都匹配不到时，会重定向到to="/novel" 从而指向的组件是component=					{NovelPage}
              2.设置进入的初始界面重定向
            */}
            <Redirect to="/novel"></Redirect>
</Switch>

React路由传参(三种方式)

1、params传参(刷新页面后参数不消失，参数会在地址栏显示)

路由页面：<Route path='/demo/:id' component={
   Demo}></Route>  //注意要配置 /:id
路由跳转并传递参数：
    链接方式：<Link to={
   '/demo/'+'6'}>XX</Link>
        或：<Link to={
   {
   pathname:'/demo/'+'6'}}>XX</Link>

    js方式：this.props.history.push(