学习react的同学,可以肯定百分之90度都接触过vue-router
所以冠以SPA 单页应用 和 路由的相关知识我就不再一一赘述了
还是直接上代码和步骤了
1.先安装 可不是 react-router
npm i react-router-dom -S
2.引入
import { BrowserRouter as Router,Route,Link } from "react-router-dom"
//这里起别名了 太长了 Router
3.使用
Router 在最外层包括着 // 建议里面 有一个div
Link 用来 路由跳转
Route 指向跳转的组件页面
function App() {
return (
<Router>
<div>
<Link to="/" >首页</Link>
<Link to="/about" >关于</Link>
<Link to="/news" >新闻页</Link>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</div>
</Router>
);
}
function News(){
return (
<div>我是新闻页面</div>
)
}
function About(){
return (
<div>我是关于页面</div>
)
}
function Home(){
return (
<div>我是首页页面</div>
)
}
export default App;
不过上面的显示页面是 会有点bug 虽然实现了 路由的跳转 但是发现首页 那个路由页面都有 这个明显不是我们想要的是把
这个问题是由于
/ 和 /news不是精确匹配导致的 只要包括了 /都算是匹配到了
这个时候我们添加上精确匹配就可以了
//加上 exact关键字
<Route exact path="/" component={Home} />
4.在vue中有 子路由的说法 就在当前的路由下面添加 children就可以了
但是在react中没有这个 但是可以通过其他的方式来实现
// 动态路由
// /news/:name添加上 冒号关键字
<Route path="/news/:name" component={Sport} />
//使用 this.props.match.params.name获取到 页面传过来的数值
class Sport extends React.Component {
render(){
console.log(this.props.match.params.name)
let a;
if(this.props.match.params.name==='football'){
a='我是足球'
}else if(this.props.match.params.name==='basketball'){
a='我是篮球'
}else{
a='我在跑步'
}
return (
<div>{a}</div>
)
}
}
同时这个复习下 let的关键字 块级作用域 如果在if语句下 定义的变量是在外面拿不到的注意了哈 童鞋们
生活那么苦,为啥不给自己一颗糖吃呢!坚持下去!你会看到不一样的风景!加油 奥利给!