react router v6版本路由对比修改

react-router-dom v6 版本的 路由如何写

如有不全的地方，多多指教

//App.js
import React, { Component } from "react";
import Home from "./view/home.js";
import Welcome from "./view/welcome";
import { Link, Route, Routes } from "react-router-dom";

import "./App.css";
class App extends Component {
  render() {
    return (
      <div>
        <Link className="routeBox" to="/welcome">
          welcome
        </Link>
        <Link className="routeBox" to="/home">
          home
        </Link>
            //在v5 版本中 的<Switch>重命名为<Routes>
        <Routes>
        // v5 !!! <Route path="/home" component={Home} /> 
        //component/render被element替代
          <Route path="/welcome" element={<Welcome />} />
          <Route path="/home" element={<Home />} />

          
        </Routes>
        //以前，我们只能 在React App中使用一个 Routes。
        //但是现在我们可以在React App中使用多个路由
        <Routes>
        // v5 !!! <Route path="/home" component={Home} />   component/render被element替代
          <Route path="/welcome" element={<about />} />
          <Route path="/home" element={<Bingo />} />

          // v6版本中用useNavigate代替useHistory
          // v6版本中用useNavigate代替useHistory
        </Routes>
      </div>
      // v5 版本中的Redirect 以及其用法<Redirect path="/" to="/product" /> 不支持

    );
  }
}

export default App;

//index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

v6版本中用useNavigate代替useHistory

// v5
import { useHistory } from 'react-router-dom';

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>TurnTo</button>;
};

// v6
import { useNavigate } from 'react-router-dom';

class MyComponent extends React.Component {
  //...
    PerformLogin = () => {
        const username = this.state.username;
        const password = this.state.password;
        // ...
        this.props.navigate('/crime');
    }
}

function WithNavigate(props) {
    let navigate = useNavigate();
    return <MyComponent {...props} navigate={navigate} />
}

export default WithNavigate

<Route children> 已更改为接受子路由。

<Router>
	<Route path="/user" children={()=>{<Component />} />
</Router>