React基础学习心得体会（react-router-dom）

第三章节：路由部分

（本文是学习尚硅谷前端react课程的学习笔记）

 

1.安装路由组件

yarn add react-router-dom

2.快速上手React-router

{/*三步走：
第一步，在app外层包裹路由组件
第二步，Route注册路由path指路径component指组件，
第三步，使用Link组件指定to路径*/}

<!-- 第一步在最外层的index文件里面添加BrowserRouter标签，
因为路由组件需要BrowserRouter或者HashRouter包裹 -->
ReactDOM.render(
   <BrowserRouter>
      <App/>
   </BrowserRouter>,
   document.getElementById('root')
)


{/* 第二步，注册路由 */}
<Route path="/about" component={About}/>

{/* 第三步，使用路由 */}
{/* 原生html中，靠<a>跳转不同的页面 */}
{/* <a className="list-group-item" href="./about.html">About</a> */}

{/* 在React中靠路由Link 实现切换组件--编写路由链接 */}
<Link className="list-group-item" to="/about">About</Link>

3.NavLink 的使用

{/*NavLink标签是高亮标签，需要有activeClassName属性点击追加样式*/}
{/*pages里面写的是spa页面，comonents是组件*/}
<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>

4.封装NavLink 

//定义一个MyNavLink 组件封装
export default class MyNavLink extends Component {
	render() {
		console.log(this.props);//可以尝试输出props来看看里面有什么
		return (
		
/* {to: "/home", children: "Home"} */

/* children就是标签里面的东西，to和path的路径是一样的*/

			/*使用下面这种语法直接将所有标签里面的参数传入进来{...this.props}*/
<NavLink activeClassName="atguigu" className="list-group-item"  {...this.props} />
		)
	}
}

5.S