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

時間 2019-11-09

原文原文鏈接

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

相信不少剛學react的朋友都會和我同樣，在使用react來建立路由的時候，發現官網上寫的是html

import *** from 'react-router';

而後百度看了不少博客文章，發現是react

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

那麼這兩個玩意兒究竟是什麼關係呢？git

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

那麼咱們要怎麼用呢？
首先，react-router-dom裏包含了react-router的依賴，所以咱們在安裝的時候只須要安裝後者便可。github

npm install react-router-dom --save

2.基礎使用

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

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

//引入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組件api

//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>)
  }
}

根據咱們上面寫的路由，可知頁面結構以下react-router

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

而後咱們在app.js中引入這個文件便可app

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

若是你根據上面的內容操做完之後，你應該能夠看到以下頁面

3.嵌套路由

當咱們須要頁面的局部變換的時候，就須要用到這個了。好比說標題欄不變，內容根據路由地址引入不一樣的模塊~dom

在須要嵌套路由的地方，加上

{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>)
  }
}

而後再更改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;

而後就能夠在瀏覽器看到效果啦，能夠看到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;