React 路由

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