React学习笔记（二）：路由（react-router-dom ）

一、BrowserRouter类型

入口文件中（index.js）

import { BrowserRouter} from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
     <App />
    </BrowserRouter>
   
  </React.StrictMode>,
  document.getElementById('root')
);

写路由的文件：

import {Link, Routes, Route} from 'react-router-dom'
import Home from './components/Home/index' 
import Home2 from './components/Home2/index'
// 类组件
export default class App extends Component{
  render () {
    return (
      <div>
        {/* 路由 */}
    
          <Link to="/home1"> 主页一</Link>
          <Link to="/home2"> 主页二</Link>
       
        {/* 注册路由 */}
        <Routes>
          <Route path="/home1" element={<Home/>}/> 
          <Route path="/home2" element={<Home2/>}/>
        </Routes>
      
          
      

      </div>
    )
  }
}

 

一、HashRouter类型

入口文件中（index.js）

 1 import { HashRouter} from 'react-router-dom'
 2 
 3 ReactDOM.render(
 4   <React.StrictMode>
 5     <HashRouter>
 6      <App />
 7     </HashRouter>
 8    
 9   </React.StrictMode>,
10   document.getElementById('root')
11 );

写路由的文件：

import {Link, Routes, Route} from 'react-router-dom'
import Home from './components/Home/index' 
import Home2 from './components/Home2/index'
// 类组件
export default class App extends Component{
  render () {
    return (
      <div>
        {/* 路由 */}
    
          <Link to="/home1"> 主页一</Link>
          <Link to="/home2"> 主页二</Link>
       
        {/* 注册路由 */}
        <Routes>
          <Route path="/home1" element={<Home/>}/> 
          <Route path="/home2" element={<Home2/>}/>
        </Routes>
      
          
      

      </div>
    )
  }
}