React Router 基本使用及实际项目使用详解

React Router 是搭配React项目开发时强大的路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

一、安装react-route-dom

在你的项目中执行

npm i react-router-dom

来安装reacr-router

二、编写最简单的路由

在我的项目中App是作为我的根组件的，我编写基本路由就在App组件内，这里根据实际项目来写，有的是写在单独的router组件里。

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './views/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  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.register();

App.jsx :

import React from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Home from './Home/Home'
import Login from './Login/Login'

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/login" component={Login} />
        <Redirect from="*"