從零開始學習React-路由react-router配置(四)

  • 2019 年 11 月 11 日
  • 筆記

路由react-router可以實現根組件自動掛載其他不同的子組件，今天寫一個路由的配置首先打開github搜索react-router，看一下上面有寫好的示例，照葫蘆畫瓢即可：

具體步驟

1：新建組件

在components文件夾底下新建3個組件頁面，用於頁面跳轉路由的示例： Home.js

import React, { Component } from 'react';  class Home extends Component {      constructor(props) {          super(props);          //react定義數據          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定義數據          this.state = {            }      }      render() {          return (              <div>                  <h2>我是News介面</h2>              </div>          )      }  }  export default News;

About.js

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

2：安裝路由模組

打開終端，進入項目，輸入安裝路由模組的命令。

cnpm  install  react-router-dom  --save

3：引入路由模組

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

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

4：路由程式碼

複製文檔裡面的路由配置的程式碼到根模組App.js裡面。

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

5:引入前面面創建的3個組件

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

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

6：頁面跳轉標籤

我們需要寫個li標籤，將跳轉組件的路徑寫在裡面。

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

好了，現在可以測試一下了

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;

Tags:

VirMach 便宜 VPS