致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第十八节
React路由
三大组件
Router:所有路由组件的跟组件(底层组件),包裹路由规则的最外层容器。
- basename属性:设置此路由跟路径
- Router可以在一个组件中写多个
- Route:路由规则的匹配组件,显示当前规则对应的组件
Link:路由跳转的组件
- Link可以设置to属性来进行页面的跳转,to属性可以直接写路径的字符串,也可以通过一个对象进行路径的设置。
- replace属性:点击链接后,将新地址替换成历史访问记录的原地址
根据不同路径显示不同内容npm install react-router-dom --save
如果要精确匹配,可以在Route上设置exact属性
动态路由实现:<Route exact path="/news/:id" component={News}></Route>
本节代码
import React from 'react'
//hash模式 带#
// import { HashRouter as Router, Link, Route } from 'react-router-dom'
//history模式/后端匹配使用
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
return (
<div>
<h1>admin首页</h1>
</div>
)
}
function Me(props) {
console.log(props.location);
return (
<div>
<h1>admin我的</h1>
</div>
)
}
function Product() {
return (
<div>
<h1>admin产品</h1>
</div>
)
}
function News(props){
console.log(props);
return(
<div>
新闻页,新闻id:{props.match.params.id}
</div>
)
}
export default class App extends React.Component {
render() {
const meObj = {
pathname: '/admin/me',//跳转的路径
search: '?username=admin',//GET请求参数
hash: "#abc",//设置的Hash值
state: { msg: 'hello world' }//传入组件的数据
}
return (
<>
<h2>普通内容-所有页面都显示</h2>
<Router>
<Link to="/">首页</Link>
<Link to="/me">Me</Link>
<Link to="/product">Product</Link>
<Link to="/news/456789">新闻</Link>
<Route exact path="/" component={() => { return (<div>首页</div>) }}></Route>
<Route exact path="/product" component={() => { return (<div>product</div>) }}></Route>
<Route exact path="/news/:id" component={News}></Route>
<Route exact path="/me" component={() => { return (<div>me</div>) }}></Route>
</Router>
{/* <Router basename="/admin"> */}
<Router>
<div className="nav">
<Link to="/admin">admin首页</Link>
<Link to="/admin/product" replace>admin产品</Link>
{/* React中两个{}代表里面的是对象 */}
<Link to={meObj}>admin个人中心</Link>
</div>
<Route path="/admin" exact component={Home}></Route>
<Route path="/admin/product" exact component={Product}></Route>
<Route path="/admin/me" exact component={Me}></Route>
</Router>
</>
)
}
}