第三章节:路由部分
(本文是学习尚硅谷前端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} />
)
}
}