react路由的使用

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

安装 npm i -S react-router-dom
引入 在项目的App.js或者index.js中引入

1. BrowserRouter as Router表示使用Router就是使用BrowserRouter
2. <Route exact path="/" component={Landing} />exact表示指定path只有在访问'/'的时候才展示component={Landing}里面的组件,这个属性可选择性使用

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;

在组件里面使用的时候需要引入Link标签

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

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