Maison > Questions et réponses > le corps du texte
这些是我在文件中使用的代码。 app.js:</p> <pre class="brush:php;toolbar:false;">importer le logo depuis './logo.svg'; importer './App.css'; importer LoginForm depuis './components/LoginForm' ; importer l'inscription depuis './signup' ; importer { BrowserRouter as Router, Routes, Route, Link, useNavigate } depuis 'react-router-dom' ; fonction App() { const naviguer = useNavigate(); const handleSignUpClick = () => { naviguer('/inscription'); } retour ( <Routeur> <div className="Connexion"> <h3> <a className="nav-link actif" aria-current = "page" href="#" onClick={handleSignUpClick}> S'inscrire ≪/a> </h3> <Itinéraires> <Chemin d'itinéraire="/" element={<LoginForm />} /> <Chemin d'itinéraire="/inscription" element={<Inscription />} /> </Itinéraires> </div> </Routeur> ); } exporter l'application par défaut ;</pre> <p>这是LoginForm.js的代码:</p> <pre class="brush:php;toolbar:false;">importer React, { useState } depuis 'react'; importer { Button, Form, FormGroup, Label, Input, InputGroup } depuis 'reactstrap' ; importer { FaEye, FaEyeSlash } depuis 'react-icons/fa' ; fonction LoginForm() { const [nom d'utilisateur, setUsername] = useState(''); const [mot de passe, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const handleSubmit = (événement) => { // gérer la soumission } const toggleShowPassword = () => { setShowPassword(!showPassword); } retour ( <div className="form-box"> <Formulaire onSubmit={handleSubmit}> <GroupeFormulaires> <Étiquette pour="nom d'utilisateur">Nom d'utilisateur</Étiquette> <Type d'entrée="texte" name="nom d'utilisateur" id="nom d'utilisateur" value={nom d'utilisateur} onChange={e => setUsername(e.target.value)} /> </GroupeFormulaires> <GroupeFormulaires> <Étiquette pour="mot de passe">Mot de passe</Étiquette> <Groupe d'entrée> <Type d'entrée={showPassword ? 'text' : 'mot de passe'} name="mot de passe" id="mot de passe" value={mot de passe} onChange={e => setPassword(e.target.value)} /> <Button onClick={toggleShowPassword}> {montrer le mot de passe ? <FaEyeSlash /> : <FaEye />} </Bouton> </InputGroup> </GroupeFormulaires> <div className="text-center"> <Bouton>Soumettre</Bouton> </div> </Formulaire> </div> ); } exporter le formulaire de connexion par défaut;</pre> <p>这是signup.js的代码:</p> <pre class="brush:php;toolbar:false;">importer './App.css'; function Inscription() { retour ( <div className="Connexion"> <h1>Application</h1> </div> ); } exporter l'inscription par défaut ;</pre></p>
P粉3015232982023-09-05 17:32:11
useNavigate
钩子不能在路由器提供的路由上下文之外使用,例如在本例中为 BrowserRouter
。您可以将BrowserRouter
提升到ReactTree中的更高位置来解决这个问题,但是有一个更简单的解决方案,只需将原始锚标记转换为RRD 链接
<Link className="nav-link active" aria-current="page" to="/signup"> Sign up </Link>
function App() { return ( <Router> <div className="Login"> <h3> <Link className="nav-link active" aria-current="page" to="/signup"> Sign up </Link> </h3> <Routes> <Route path="/" element={<LoginForm />} /> <Route path="/signup" element={<SignUp />} /> </Routes> </div> </Router> ); }