①react-router4.x使用

react路由的配置:

1、找到官方文檔 https://reacttraining.com/react-router/web/example/basic

2、安裝 react-router-dom --save

3、找到項目的根組件引入react-router-dom

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

4、在根組件裏面的內容進行修改 (加載的組件要提前引入)放入以下代碼

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';

class App extends Component {
  render() {
    return (
        <Router>
          <div>           
              <header className="title">
                <Link to="/">首頁</Link>
                <Link to="/news">新聞</Link>
                <Link to="/product">商品</Link>
              </header>

      
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />    
              <Route path="/product" component={Product} />                 
          </div>
      </Router>
    );
  }
}

export default App;

以上便實現了react-router的簡單配置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章