[英]React-routing -> routing renders on same page even after "exact" field
我想在登錄頁面中單擊時呈現注冊頁面。 我在路由方面遇到了一些問題。 注冊頁面呈現在同一頁面上。 我只在登錄頁面(“/signup”)上創建了一個路由。 我的目標是僅呈現一個僅包含注冊詳細信息的新頁面。 我認為通過添加精確它會解決它。
import React from 'react'; import './Login.css'; import {Route, Link, BrowserRouter as Router} from 'react-router-dom' import Signup from "./Signup"; import Home from "./Home"; function Login() { return ( <div class="login-page"> <h2 id="projectName" class="text-center"> login. </h2> <div class="form"> <form class="login-form"> <input type="text" placeholder="Username"/> <input type="password" placeholder="Password"/> <button>login</button> <Router> <p class="message">New user -> <Link to="/signup">Sign up</Link> </p> <Route path="/signup" exact={true} component={Signup} /> </Router> <p class = "message"> <a href="#">Forgot Password</a> or <a href="#">Forgot Username</a> </p> </form> </div> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="tagline text-center"></h1> </div> </div> </div> </div> ); } export default Login;
import React from 'react'; import './Login.css'; function Signup() { return ( <div class="login-page"> <h2 id="projectName" class="text-center"> signup.</h2> <div class="form"> <form class="login-form"> <input type="text" placeholder="First name"/> <input type="text" placeholder="Last name"/> <input type="email" placeholder="Email"/> <input type="text" placeholder="Username"/> <input type="password" placeholder="Password"/> <button>Sign up</button> <p class="message">Already have an account -> <a href="">Login</a></p> </form> </div> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="tagline text-center"></h1> </div> </div> </div> </div> ); } export default Signup;
<Route path="/" exact component={login} />
在 app.js 文件中
希望這能解決你的問題
在 login.js 組件中試試這個
import React from 'react';
import {Link} from 'react-router-dom'
function Login() {
return (
<div class="login-page">
<h2 id="projectName" class="text-center"> login. </h2>
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button>login</button>
<p class="message">New user ->
<Link to="/signup">Sign up</Link>
</p>
<p class = "message"> <a href="#">Forgot Password</a> or <a href="#">Forgot Username</a> </p>
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline text-center"></h1>
</div>
</div>
</div>
</div>
);
}
export default Login;
在注冊.js
import React from 'react';
function Signup() {
return (
<div class="login-page">
<h2 id="projectName" class="text-center"> signup.</h2>
<div class="form">
<form class="login-form">
<input type="text" placeholder="First name"/>
<input type="text" placeholder="Last name"/>
<input type="email" placeholder="Email"/>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button>Sign up</button>
<p class="message">Already have an account -> <a href="">Login</a></p>
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline text-center"></h1>
</div>
</div>
</div>
</div>
);
}
export default Signup;
創建路由組件以重定向到其他組件
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Signup from './Signup'
const Routes = () => {
return(
<Switch>
<Route path="/signup" exact={true} component={Signup} />
</Switch>
)
}
export default Routes;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.