React react-router-dom的基本使用

一、环境准备

创建React项目

create-react-app hello-react

进入项目后安装ract-router-dom

npm install react-router-dom

二、步骤

2.1 创建路由组件

2.2 更改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// 引入BrowserRouter组件
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
  // 包裹<APP/>
  <BrowserRouter>
    <App />
  </BrowserRouter>  
  ,
  document.getElementById('root')
);

2.3 更改APP.js

import './App.css';
// 引入组件
import {
  Route,
  Switch,
  Link,
  Redirect
} from 'react-router-dom'
import {lazy,Suspense} from 'react'

// 引入组件(懒加载)
const Home = lazy(() => import('./pages/Home/Home'))
const Main = lazy(() => import('./pages/Main/Main'))

function App() {
  return (
    <div className="App">
      {/* 导航栏 */}
      <div className="nav">
        <Link to="/home">Home</Link>
        <Link to="/main">Main</Link>
      </div>

      {/* 显示界面 */}
      <div className="panel">
        <Suspense fallback={<p>加载中...</p>}>
          <Switch>
            {/* Home组件 */}
            <Route path="/home">
              <Home/>
            </Route>

            {/* Main组件 */}
            <Route path="/main" component={Main}/>

            {/* 默认重定向到Home */}
            <Redirect to="/home"/>
          </Switch>
        </Suspense>
        
      </div>

    </div>
  );
}

export default App;

最终效果：