2022年前後に色々変わったReactの話

仕様変更が結構痛いところに来たので備忘録です。

React Router 系

変更後の書き方

import { BrowserRouter, Route,Routes } from 'react-router-dom';
...
const App:React.FC = () => {
...
    return(
        <BrowserRouter>
            <Routes>
                <Route
                    path = '/'
                    element={
                        <Home />
                    }
                />
                <Route
                    path = 'about'
                    element={
                        <About />
                    }
                />
            </Routes>
        </BrowserRouter>
    );
}

useHistory -> useNavigate

変更後の書き方

import {useNavigate} from "react-router-dom";
...
const App:React.FC = () => {
    const navigate = useNavigate();
    const toabout = () => {
        navigate("/about");
    };
...
    return(
        <button onClick={toabout}>Aboutへ</button>
    );
}