路由react-router可以實(shí)現(xiàn)根組件自動(dòng)掛載其他不同的子組件，今天寫一個(gè)路由的配置首先打開github搜索react-router，看一下上面有寫好的示例，照葫蘆畫瓢即可：
https://reacttraining.com/react-router/web/example/basic

具體步驟

1：新建組件

在components文件夾底下新建3個(gè)組件頁面，用于頁面跳轉(zhuǎn)路由的示例：
Home.js

import React, { Component } from 'react';
class Home extends Component {
    constructor(props) {
        super(props);
        //react定義數(shù)據(jù)
        this.state = {          
        }
    }
    render() {
        return (
            <div>
                <h2>我是Home組件界面</h2>
            </div>
        )
    }
}
export default Home;

New.js

import React, { Component } from 'react';
class News extends Component {
    constructor(props) {
        super(props);
        //react定義數(shù)據(jù)
        this.state = {
            
        }
    }
    render() {
        return (
            <div>
                <h2>我是News界面</h2>                           
            </div>
        )
    }
}
export default News;

About.js

import React  from 'react';
class About extends React.Component {
    //構(gòu)造函數(shù)
    constructor(props) {
        super(props);
        //react定義數(shù)據(jù)
        this.state = {
        
        }
    }
    render() {
        return (
        <div> 
        <h2>我是About界面</h2>
        </div>
        )
    }
}
export default About;

2：安裝路由模塊

打開終端，進(jìn)入項(xiàng)目，輸入安裝路由模塊的命令。

cnpm  install  react-router-dom  --save

3：引入路由模塊

安裝完成之后，在根組件App.js里面引入路由模塊。

import {BrowserRouter as Router,Route,Link} from "react-router-dom";

4：路由代碼

復(fù)制文檔里面的路由配置的代碼到根模塊App.js里面。

    <Router>
      <div>
          <Route exact path="/" component={Home} />          
          <Route exact path="/news" component={News} />
          <Route exact path="/about" component={About} />
      </div>
    </Router>

5:引入前面面創(chuàng)建的3個(gè)組件

import Home from './components/Home';
import About from './components/About';
import News from './components/News';

到這一步的時(shí)候，路由配置完成了。

6：頁面跳轉(zhuǎn)標(biāo)簽

我們需要寫個(gè)li標(biāo)簽，將跳轉(zhuǎn)組件的路徑寫在里面。

<ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/news">News</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
</ul>

好了，現(xiàn)在可以測試一下了

App.js參考代碼

import React from 'react';
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
//引入新建的組件
import Home from './components/Home';
import About from './components/About';
import News from './components/News';
function App() {
    return(
        <Router>
      <div>
      <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/news">News</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />     
          <Route exact path="/" component={Home} />          
          <Route exact path="/news" component={News} />
          <Route exact path="/about" component={About} />
      </div>
    </Router>
    );
}
export default App;

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運(yùn)營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，歡迎關(guān)注【編程微刊】公眾號(hào)，回復(fù)【領(lǐng)取資源】,500G編程學(xué)習(xí)資源干貨免費(fèi)送。