react路由

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

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

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router} from "react-router-dom";
ReactDOM.render(
        <Router>
            <App />
        </Router>,
    document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

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

import React from 'react';
import List from './components/list';
import Shop from './components/shop';
import {Route,Link,Switch,Redirect} from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <Link to='/list'>list</Link>
      <Link to='/shop'>shop</Link>
      <Switch>
        <Route path='/list' component={List}/>
        <Route path='/shop' component={Shop}/>
        <Redirect from='/' to='/list' exact />
      </Switch>
    </div>
  );
}

export default App;

逆战班