最新 react（17.0.2）路由的基本使用

最新 react（17.0.2）路由的基本使用

首先，npm i react-router-dom，使用npm下载react-router-dom
在react脚手架中使用：

import React from 'react';
import ReactDOM from 'react-dom';
// 导入BrowsrRouter，将应用程序连接到浏览器的 URL：导入BrowserRouter并围绕整个应用程序呈现它。
import { BrowserRouter } from 'react-router-dom';
import App from './App';


ReactDOM.render(
	// 在这里使用，避免每一次使用时都要引入
    <BrowserRouter>
      <App />
    </BrowserRouter>,
  document.getElementById('root')
);

接下来，添加链接并配置路由规则，需要先定义配置时所需要的组件：

function Hello() {
  return (
    <div>
      <div>hello</div>
    </div>
  )
}

function World () {
  return (
    <div>
      <div>world</div>
    </div>
  )
}

在与组件的同一个文件下，配置路由规则，

import {useState} from 'react'
import { Route, Routes, Link } from 'react-router-dom'
// 路由组件2
function Hello() {
  return (
    <div>
      <div>hello</div>
    </div>
  )
}
// 路由组件2
function World () {
  return (
    <div>
      <div>world</div>
    </div>
  )
}
export default function App() {
  const [count, setCount] = useState(1)
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>
      	click me
      </button>
        <ul>
        	// 添加链接
          <li><Link to="/">hello</Link></li>
          <li><Link to="/world">world</Link></li>
        </ul>
       	// 添加路由，使用element属性配置组件，方便传值，不再使用component
        <Routes>
          <Route path="/" element={<Hello />} />
          <Route path="/world/" element={<World />} />
        </Routes>
      
    </div>
  )
}