React 路由
根据不同的路径,显示不同的组件(内容);React使用的库react-router-dom;
安装
cnpm install react-router-dom --save
ReactRouter三大组件:
Router:所有路由组件的根组件(底层组件),包裹路由规则的最外层容器。
属性:basename->设置跟此路由根路径,router可以在1个组件中写多个。
Route:路由规则匹配组件,显示当前规则对应的组件
Link:路由跳转的组件
注意:如果要精确匹配,那么可以在route上设置exact属性。
Router使用案例
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>admini首页</h1>
</div>
)
}
function Me(){
return (
<div>
<h1>admin个人中心</h1>
</div>
)
}
function Product(){
return (
<div>
<h1>admin产品页面</h1>
</div>
)
}
class App extends React.Component{
render(){
return (
<div id="app">
{/* <div>所有页面普通内容</div> */}
<Router>
<Route path="/" exact component={()=>(<div>首页</div>)}></Route>
<Route path="/me" component={()=>(<div>me</div>)}></Route>
<Route path="/product" component={()=>(<div>product</div>)}></Route>
</Router>
<Router>
{/* <div className="nav">
<Link to="/">Home</Link>
<Link to="/product">Product</Link>
<Link to="/me">个人中心</Link>
</div> */}
<Route path="/admin/" exact component={Home}></Route>
<Route path="/admin/product" component={Product}></Route>
<Route path="/admin/me" exact component={Me}></Route>
</Router>
</div>
)
}
}
export default App
Link组件可以设置to属性来进行页面的跳转,to属性可以直接写路径的字符串,也可以通过1个对象,进行路径的设置,如
render(){
let meObj = {
pathname:"/me",//跳转的路径
search:"?username=admin",//get请求参数
hash:"#abc",//设置的HASH值
state:{msg:'helloworld'}//传入组件的数据
};
return (
<div id="app">
<Router>
<div className="nav">
<Link to="/">Home</Link>
<Link to="/product">Product</Link>
<Link to={ meObj }>个人中心</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" exact component={Me}></Route>
</Router>
</div>
)
}
Link的replace属性:点击链接后,将新地址替换成历史访问记录的原地址。
动态路由实现:
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>admini首页</h1>
</div>
)
}
function Me(props){
console.log(props)
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>
)
}
class App extends React.Component{
render(){
let meObj = {
pathname:"/me",//跳转的路径
search:"?username=admin",//get请求参数
hash:"#abc",//设置的HASH值
state:{msg:'helloworld'}//传入组件的数据
};
return (
<div id="app">
<Router>
<div className="nav">
<Link to="/">Home</Link>
<Link to="/product">Product</Link>
<Link to={ meObj } replace>个人中心</Link>
<Link to="/news/4568789">新闻页</Link>
</div>
<Route path="/" exact component={Home}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/me" exact component={Me}></Route>
<Route path="/news/:id" component={News}></Route>
</Router>
</div>
)
}
}
export default App