React- Link nie działa

Question

Jak w tytule, nie działa mi Link, ma ktoś pomysł czemu?  

import React from 'react';
import decoration from "../../assets/assets/Decoration.svg";
import {Link} from 'react-router-dom';

const HomeHeader = () => {
    return (
        <section className="container HomeHeader">
             <nav className="HomeNav">
                 <ul className="HomeLogin">
                     <Link to={"../Login/Login.js"} className="HomeLoginText">Zaloguj</Link>
                     <Link to={"Login/Registration.js"}  className="HomeLoginText">Załóż konto</Link>
                 </ul>
             </nav>
         </section>
     );
 };

import Home from "./components/Home/Home"
import "./scss/main.scss";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import HomeHeader from "./components/Home/HomeHeader";
import Login from "./components/Login/Login";
import Registration from "./components/Login/Registration";

function App() {
    return (
        <Router>
            <div className="Home">
                <HomeHeader />
                <Switch>
                    <Route path="/">
                        <Home/>
                    </Route>
                    <Route path="/Login">
                        <Login/>
                    </Route>
                    <Route path="/Registration">
                       <Registration />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

export default App;

 

Answer 1

Jak masz 

<Route path="/Login">
  <Login/>
</Route>

to props to w Link powinien być z tym path :P a nie z jakimś losowym plikiem :P

<Link to="/Login" className="HomeLoginText">Zaloguj</Link>

to jest centralnie w pierwszym przykładzie react-router

 

Answer 2

function App() {
    return (
        <Router>
            <div className="Home">
                <HomeHeader />
                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route path="/Login">
                        <Login/>
                    </Route>
                    <Route path="/Registration">
                       <Registration />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}
 
export default App;

Linia nr 7  zmiana :

<Route exact path="/"> <Home/> </Route>

Pozdrawiam Serdecznie