2021.11.28 TIL

ReactとFirebaseを使用してログインの実装を練習

1.Routesの作成

import React, { useState } from 'react'
import {HashRouter, Route, Routes} from 'react-router-dom'
import Home from './routes/Home'
import Auth from './routes/Auth'

const Routers = () => {
    const [loginstate, loginset] = useState(false) 
    return (
        <HashRouter>
            <Routes>
                {loginstate ? (
                <><Route path="/" exact element={<Home />}></Route></> ) : (
                <><Route path="/" exact element={<Auth />}></Route></>
            )}
            </Routes>
        </HashRouter>
    )
}

export default Routers

表に記入する.

以前に使用されていたreact-router-domは[email protected]バージョン6からバージョン6に更新され、

が変更されました.

ルーティングのコンポーネント属性が要素

に変更されました.

応答-router-domのスイッチがroutes

に変更されました.

2.絶対パスへのコンポーネントのインポート

jsconfigは、

コンポーネントを絶対パスとしてreactアプリケーションにインポートします.jsonファイル

の作成

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

追加(https://create-react-app.dev/docs/importing-a-component参照)