React-router-dom Link не работает на моем проекте

Question

Я изучаю React, и это простой проект для запуска с маршрутизацией, он не отображает сообщения об ошибках, когда я нажимаю на ссылку, он не работает, но остается на целевой странице.

Это мое приложение. js код:

import React from 'react';
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Proyectos from './components/proyectos/Proyectos';
import Login from './components/auth/Login';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact patch="/" component={Login} />
        <Route exact patch="/proyectos" component={Proyectos} />
      </Switch>
    </Router>
  );
}

export default App;

Это мой логин. js код:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Login = () => {

    const [ usuario, guardarUsuario ] = useState({
        email: '',
        password: ''
    })

    const { email, password } = usuario;

    const onChange = e =>{
        guardarUsuario({
            ...usuario,
            [e.target.name]: e.target.value
        })
    }


    return ( 
        <div className="form-usuario">
            <div className="contenedor-form sombra-dark">
                <h1>Inicar Sesión</h1>
                <form>
                    <div className="campo-form">
                        <label htmlFor="email">Email</label>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            placeholder="Tu Email"
                            value={email}
                            onChange={onChange }
                            />
                    </div>
                    <div className="campo-form">
                        <label htmlFor="password">Email</label>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            placeholder="Tu Password"
                            value={password}
                            onChange={onChange}
                            />
                    </div>
                    <div className="campo-form">
                        <input  type="submit" className="btn btn-primario btn-block" value="Iniciar Sesion"/>
                    </div>
                </form>
                <Link to={'/proyectos'} className="enlace-cuenta">
                    Obtener tu cuenta
                </Link>
            </div>
        </div>
     );
}

export default Login;

Это Proyecto. js код:

import React from 'react';

const Proyectos = () => {
    return ( <h1>Desde Proyectos</h1> );
}

export default Proyectos;

Я попытался переустановить пакет и создать новый проект, но он все еще не работает, и я не знаю почему.

Answer 1

Я думаю, что это только опечатка на вашем компоненте

Измените патч на путь в вашем компоненте маршрута

//App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Proyectos from './components/proyectos/Proyectos';
import Login from './components/auth/Login';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/proyectos" component={Proyectos} />
      </Switch>
    </Router>
  );
}

export default App;

Answer 2

Ваша проблема здесь

 <Link to={'/proyectos'} className="enlace-cuenta">
                    Obtener tu cuenta
                </Link>

Возьмите {}

и просто наберите

 <Link to='/proyectos' className="enlace-cuenta">
                    Obtener tu cuenta
                </Link>