【圖文並茂】React中路由的使用

1.react-router和react-router-dom有什麼區別？

相信很多剛學react的朋友都會和我一樣，在使用react來創建路由的時候，發現官網上寫的是

import *** from 'react-router';

然後百度看了很多博客文章 ，發現是

import *** from 'react-router-dom';

那麼這兩個玩意兒到底是什麼關係呢？

• react-router：提供了router的核心api。如Router、Route、Switch等，但沒有提供有關dom操作進行路由跳轉的api；
• react-router-dom：提供了BrowserRouter、Route、Link等api，可以通過dom操作觸發事件控制路由。

那麼我們要怎麼用呢？
首先，react-router-dom裏包含了react-router的依賴，因此我們在安裝的時候只需要安裝後者即可。

npm install react-router-dom --save

2.基礎使用

注意：這裏使用的是BrowserRouter的路由模式。請根據你的需要選擇不同模式。
各種模式區別請看 react-router中文文檔 ，這裏不做贅述

1. 新建一個Router.js文件，至於在哪裏新建，你喜歡就好。

   //引入react jsx寫法的必須
   import React from 'react'; 
   //引入需要用到的頁面組件 
   import Home from './pages/home';
   import About from './pages/about';
   //引入一些模塊
   import { BrowserRouter as Router, Route} from "react-router-dom";
   
   function router(){
   return (
   <Router>
       <Route path="/home" component={Home} />
       <Route path="/about" component={About} />
   </Router>);
   }
   
   export default router;

   這裏是home組件

   //home.js
   import React, { Component } from 'react';
   
   export default class Home extends Component {
     render() {
       return (<h1>
         歡迎，這裏是Home
       </h1>)
     }
   }

   這裏是about組件

   //about.js
   import React, { Component } from 'react';
   
   export default class About extends Component {
     render() {
       return (<h1>
         歡迎，這裏是About
       </h1>)
     }
   }

2. 根據我們上面寫的路由，可知頁面結構如下

   |
   |--home
   |--about
   //那麼localhost:3000/home  就會渲染home組件（如果你的項目是react腳手架默認生成的項目）
   //localhost:3000/about 就會渲染about組件

3. 然後我們在app.js中引入這個文件即可

   import Router from './Router'
   class App extends React.Component {
   render(){
   return (
     <Router />
   );
   }
   }

4. 如果你根據上面的內容操作完以後，你應該可以看到如下頁面

3.嵌套路由

當我們需要頁面的局部變換的時候，就需要用到這個了。比如說標題欄不變，內容根據路由地址引入不同的模塊~

1. 在需要嵌套路由的地方，加上

   {this.props.children}  //這裏就是嵌套路由展示的地方

   比如我們現在要給about加一個子路由other
   那麼我們首先需要改寫about.js文件

   //about.js
   import React, { Component } from 'react';
   
   export default class About extends Component {
     render() {
       return (<h1>
         歡迎，這裏是About
         {this.props.children}  //這裏就是嵌套路由展示的地方
       </h1>)
     }
   }

2. 然後再更改router.js路由文件

   //前面的引入就省略了，查看上一章節即可
   //新引入一個ohter組件，用於渲染嵌套路由,other內容和前面的home.js一樣
   import Ohter from './pages/other';
   
   function router(){
   return (
   <Router>
       <Route path="/home" component={Home} />
       <Route path="/about" render={()=>(
         <About>
           <Route path="/about/other" component={Other} />
         </About>
       )}>
       </Route>
   </Router>);
   }
   export default router;

3. 然後就可以在瀏覽器看到效果啦，可以看到other組件嵌套在了about裏面

注意事項
1/ render={()=>對象} 這裏的對象不需要大括號噢，如果你熟悉箭頭語法的話，那麼應該不用我多說
2/ 擁有子路由的路由不能添加 exact屬性，不然會無法訪問到子組件

4.重定向

有時候，我們需要把 "/" 重定向到我們的主頁，這樣用戶直接輸入"www.***.com"就可以了，而不用輸入"www.***.com/home"。

//router.js
//需要import一下Redirect
import {Redirect} from "react-router-dom";

return (
<Router>
    <Route path="/home" component={Home} />
    <Route path="/" render={
      ()=> (
      <Redirect to="/home"/>)}>
    </Route>
</Router>);
}
export default router;

5.結語

我也是剛學react 2天，然後整這個路由整1小時才整明白，官方中文文檔的有些東西好像過期了，像IndexRoute，一直引入一直報錯，實屬蛋疼。
如果有寫錯的地方，或者有更好的寫法，歡迎給我留言~謝謝