react里面的路由使用react-router-dom

安裝 npm i -S react-router-dom
引入 在項(xiàng)目的App.js或者index.js中引入

1. BrowserRouter as Router表示使用Router就是使用BrowserRouter
2. <Route exact path="/" component={Landing} />exact表示指定path只有在訪問(wèn)'/'的時(shí)候才展示component={Landing}里面的組件,這個(gè)屬性可選擇性使用

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';

import Footer from './components/layout/Footer';
import Lander from './components/layout/Lander';
import NavBar from './components/layout/NavBar';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Footer></Footer>
          <Route path='/' component={Lander}></Route>
          <NavBar></NavBar>
        </div>
      </Router>
    );
  }
}

export default App;

在組件里面使用的時(shí)候需要引入Link標(biāo)簽

import { Link } from 'react-router-dom';

class Home extends Component {
  render() {
    return (
          <div>
            <Link  to="/home"/>
          </div>
    )
  }
}