1. 說明：
   a. 引入模塊：
   
   b. 定義路徑和鏈接：
   
   c. 定義子路徑：
   
   d. 定義單擊跳轉(zhuǎn)事件：
   

2. 完整代碼：

   成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、重慶網(wǎng)站建設(shè)公司、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。核心團隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：陽臺護欄等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致稱譽！
   

   var React = require('react')
   var ReactDom = require('react-dom')
   var ReactRouter = require('react-router-dom')
   var Router = ReactRouter.BrowserRouter
   var Route = ReactRouter.Route
   var Link = ReactRouter.Link
   var browserHistory = ReactRouter.browserHistory
   var CreateClass = require('create-react-class')
   var PropTypes = require('prop-types')
   var Index = CreateClass({
   render:function(){
       return (
           <Router history={browserHistory}>
               <div>
                   <ul>
                       <li><Link to="/">Home</Link></li>
                       <li><Link to="/about">About</Link></li>
                       <li><Link to="/docs">Docs</Link></li>
                   </ul>
                   <hr/>
                   <Route exact path="/" component={Home}/>
                   <Route path="/about" component={About}/>
                   <Route path="/docs" component={Docs}/>
                   <Route path="/step1" component={Step1}/>
               </div>
           </Router>
       )
   }
   })
   var Home = CreateClass({
   render:function(){
       return(
           <div>
               <h3>Home</h3>
           </div>
       )
   }
   })
   var About = CreateClass({
   render:function(){
       return(
           <div>
               <h3>About</h3>
           </div>
       )
   }
   })
   var Docs = CreateClass({
   render:function(){
       return(
           <div>
               <ul>
                   <li><Link to="/step1">Step1</Link></li>
               </ul>
   
               <hr/>
   
               <Route exact path="/step1" component={Step1}/>
           </div>
       )
   }
   })
   var Step1 = CreateClass({
   onClick:function(){
       var history = this.props.history
       history.push('/')
   },
   render:function(){
       return(
           <div>
               <span onClick={this.onClick}>回到主頁</span>
               <h3>Step1</h3>
           </div>
       )
   }
   })
   ReactDom.render((
   <Index/>
   ), document.body)

3. 效果：
   a. 主頁：
   
   b. 父頁面：
   
   c. 子頁面：
   
   d. 點擊回到主頁：
   
4. 手動控制跳轉(zhuǎn)：
   a. 引入組件：

   var ReactRouter = require('react-router-dom')
   var withRouter = ReactRouter.withRouter

   
   b. 使用：

   this.props.history.push("/")

   
   c. 導(dǎo)出：

   module.exports = withRouter(Login)

   

5. 使用hash路由（使代碼打包后可以在本地運行）：
   a. 引入模塊：

   var Router = ReactRouter.HashRouter

   
   b. 使用：

   <Router>
   <LocaleProvider locale={Cn}>
       <div className="index_container">
           <Head/>
           <Route exact path="/" component={Home}/>
           <Route path="/home" component={Home}/>
           <Route path="/login" component={Login}/>
           <Route path="/system" component={System}/>
           <Route path="/user" component={User}/>
           <Foot/>
           <Write/>
       </div>
   </LocaleProvider>
   </Router>

   

6. 404頁面：
   a. 引入：

   var Switch = ReactRouter.Switch

   b. 定義：

   <Switch>
   <Route exact path="/some/path" component={XXX}/>
   <Route path="*" component={Notfound}/>
   </Switch>

新聞標(biāo)題：react-router基本用法
URL地址：http://jinyejixie.com/article46/pdcoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、用戶體驗、App設(shè)計、企業(yè)網(wǎng)站制作、ChatGPT、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)