App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom'

import Home from "./Home"
import Navigation from "./Navigation"
import Quizzer from "./Quizzer"
import Admin from "./Admin"
import Login from "./Login"
import Logout from "./Logout"
import { CookiesProvider } from 'react-cookie';

const App = function(props) {
    return (
        <>
            <CookiesProvider>
                <Navigation />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/quizzer" component={Quizzer} />
                    <Route path="/admin" component={Admin} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="/logout" component={Logout} />
                </Switch>
            </CookiesProvider>
        </>
    )
}

export default App;

app.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import App from "../components/App"
import { BrowserRouter as Router, Route} from 'react-router-dom'

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(
        <Router>
            <Route path="/" component={App} />
        </Router>,
        document.body.appendChild(document.createElement('div')),
    )
})

error

Uncaught TypeError: cookies.get is not a function
    at Navigation (Navigation.js:10)
    at renderWithHooks (react-dom.development.js:14972)
    at mountIndeterminateComponent (react-dom.development.js:17734)
    at beginWork (react-dom.development.js:18935)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3922)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3971)
    at invokeGuardedCallback (react-dom.development.js:4031)
    at beginWork$1 (react-dom.development.js:23780)
    at performUnitOfWork (react-dom.development.js:22616)
    at workLoopSync (react-dom.development.js:22553)

Navigation.js

import React from "react"
import { Link } from "react-router-dom"
import { useCookies } from "react-cookie"

const Navigation = function (props) {
    const [cookies, setCookie, removeCookie] = useCookies(['Authorization'])
    console.log(cookies)

    let login_logout_link = null
    if (cookies.get('Authorization')) {
        login_logout_link = <Link className="nav-link" to="/logout">Logout</Link>
    } else {
        login_logout_link = <Link className="nav-link" to="/login">Login</Link>
    }

    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <div className="container">
                <Link className="navbar-brand" to="/">Langsite</Link>

                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
            
                <div className="collapse navbar-collapse" id="navbar-content">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <Link className="nav-link" to="/">Home</Link>
                        </li>
                        <li className="nav-item active">
                            <Link className="nav-link" to="/quizzer">Quizzer</Link>
                        </li>
                        <li className="nav-item active">
                            <Link className="nav-link" to="/admin">Admin</Link>
                        </li>
                    </ul>
                </div>

                <div className="collapse navbar-collapse justify-content-end" id="navbar-content">
                    <ul className="navbar-nav">
                        <li className="nav-item">
                            {login_logout_link}
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
}

export default Navigation;