如何解决如何在React中链接两个单独的页面?
我在名为components的文件夹中有两个页面,分别为“注册”和“登录”,我尝试使用<Link>
将注册页面与登录页面链接。但这给出了一些错误。
components / SignUp.js
<div className = 'spacing'>Already have an account? <span className = 'highlight'><Link to = {'/SignIn'}>Sign In</Link></span></div>
components / SignIn.js
import React,{ Component } from 'react'
import './SignInStyleSheet.css'
class SignIn extends Component {
render() {
return (
<React.Fragment>
{/* for pop-up success */}
<div class = "pop-up-success">
<h3> Login Successful.</h3>
</div>
{/* for pop-up error */}
<div class = "pop-up-error">
<h3> Incorrect Username/ Password.</h3>
</div>
<div class = 'container'>
{/* for form Box */}
<div class =' window'>
<div class = 'bold-line'></div>
<div class = 'overlay'></div>
<div class = 'content'>
<div class = 'welcome'>Welcome Again!</div>
<div class = 'subtitle'>Thank you to step forwaerd to save water.</div>
<form class = "input-fields">
<input type = 'email' placeholder = 'Email' class = 'input-line full-width' value = "" name = "useremail" id = "email" required></input>
<input type = 'text' placeholder = 'Street' class = 'input-line full-width' required></input>
<input type = 'text' placeholder = 'City' class = 'input-line full-width' required></input>
<select id = "select_opt" class = 'input-line full-width' required></select>
<input type = 'password' placeholder = 'Password' class = 'input-line full-width' value = "" name = "userpasswd" id = "password" required></input>
</form>
<div class = 'spacing'>Forgot Password? <span class = 'highlight'><a href = "#">Click Here</a></span></div>
<div><button id = 'loginBtn' class = 'ghost-round full-width' type = "button">Log In</button></div>
<div class = 'spacing'>New User? <span class = 'highlight'><a href = "sign-up.html">Sign Up</a></span></div>
</div>
</div>
</div>
</React.Fragment>
)
}
}
export default SignIn
错误:
Error: Invariant Failed: You should not use <Link> outside a <Router>
解决方法
管理React应用程序页面之间导航的最佳方法是使用react Router-路由器管理应用程序中可用的路由(即,链接到应用程序页面的URL)。
看看这是对React Router的介绍: https://www.freecodecamp.org/news/react-router-in-5-minutes/
,使用以下命令安装react-router-dom
npm install --save react-router-dom
在您的项目目录中创建一个新文件(MainRouter)
import { BrowserRouter,Route,Link } from "react-router-dom"; //import the package
import SignIn from "../SignIn" //import your signIn page
import SignUp from "../SignUp" //import your signUp page
function MainRouter(){
return(
<BrowserRouter>
<div className="container">
<Switch>
<Route path="/signIn" component={SignIn} />
<Route path="/signUp" component={SignUP} />
</Switch>
</div>
</BrowserRouter>
)
}
export default MainRouter
为什么需要这个
react-router-dom软件包允许您在浏览器(客户端)中动态浏览页面而无需刷新页面,这是在单页面应用程序中处理导航的好方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。