React-router-dom Link 在我的项目上不起作用

Question

我正在学习 React，它只是一个从路由开始的简单项目，它不显示错误消息，当我点击 link 它不起作用但保持在着陆页。

这是我的 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 patch="/" component={Login} />
        <Route exact patch="/proyectos" component={Proyectos} />
      </Switch>
    </Router>
  );
}

export default App;

这是我的 Login.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

你的问题在这里

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

取出{}

并且只有

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

Answer 2

我认为这只是您组件上的拼写错误

在路由组件中将 patch 更改为 path

//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;

React-router-dom Link 在我的项目上不起作用

React-router-dom Link is not working on my proyect

javascript

routing

reactjs

React-router-dom Link 在我的项目上不起​​作用

React-router-dom Link is not working on my proyect

javascript

routing

reactjs

React-router-dom Link 在我的项目上不起作用