我正在使用React开发前端应用程序的Web应用程序,我真的很新,但是我了解主要概念。
现在我有一个通过我的App.js文件呈现的索引页面,这是一些代码:
import React from 'react';
import {BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom';
import Login from './Components/Login.component';
import Register from './Components/Register.component';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
function App() {
return (
<Router>
<div className="container-fluid blue-container">
<div className="row justify-content-center">
<div className="col-lg-5 mx-auto justify-content-center" style={{textAlign:"center"}}>
<img className="img-fluid img-fluid-logo mt-4" alt="logo" src="logo.png" />
</div>
</div>
<div className="row justify-content-center d-flex align-items-center">
<div className="col-lg-5 mx-auto justify-content-center d-flex align-items-center" style={{marginTop:"120px",textAlign:"center"}}>
<Link to="/Login" className="btn btn-primary" style={{marginRight:"10px"}}><i className="fas fa-lock"></i> Se connecter</Link>
<Link to="/Register" className="btn btn-primary"><i className="fas fa-lock"></i> S'inscrire</Link>
</div>
</div>
</div>
<Switch>
<Route path="/Login">
<Login />
</Route>
<Route path="/Register">
<Register />
</Route>
</Switch>
</Router>
);
}
export default App;
如您所见,我正在两个不同文件(登录和注册)中使用两个组件。一切工作正常,但是我遇到的问题是,当我单击“ 链接”时,应用程序将渲染应该渲染的h1,但问题是它在我的主容器之后显示,这是图像:
(徽标和两个LINKS在app.js代码中)
我的问题是:有什么方法可以控制发生LINK click事件后要删除的第一个组件(徽标和两个链接),并且仅呈现登录/注册表单,而无需使用Javascript或jquery?
先感谢您 !
有几种方法可以解决此问题。我建议将您的主容器(即徽标和登录页面中您想要的其他内容)放在另一个组件中(让我们称之为Main
),然后Main
在单独的路线中渲染该组件,例如:
<Router>
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route path="/Login">
<Login />
</Route>
<Route path="/Register">
<Register />
</Route>
</Switch>
</Router>
指定exact path="/"
意味着仅当路由正好为 “ /”时,模式才会匹配。即它将与myApp.com
但不匹配myApp.com/Login
。现在,您的Main
组件将如下所示:
function Main() {
return(<div className="container-fluid blue-container">
<div className="row justify-content-center">
<div className="col-lg-5 mx-auto justify-content-center" style={{textAlign:"center"}}>
<img className="img-fluid img-fluid-logo mt-4" alt="logo" src="logo.png" />
</div>
</div>
<div className="row justify-content-center d-flex align-items-center">
<div className="col-lg-5 mx-auto justify-content-center d-flex align-items-center" style={{marginTop:"120px",textAlign:"center"}}>
<Link to="/Login" className="btn btn-primary" style={{marginRight:"10px"}}><i className="fas fa-lock"></i> Se connecter</Link>
<Link to="/Register" className="btn btn-primary"><i className="fas fa-lock"></i> S'inscrire</Link>
</div>
</div>
</div>)
}
当我键入URL“ localhost:3000 / Login”时,它仅呈现Login组件中的内容,但是当我按您所说的那样单击MAIN组件中的LINK时,什么也没有发生。PS:我的app.js文件仅包含Router,Switch,Route和组件,而每个组件都在不同的文件中。
最终成功了,谢谢@IsmaelPadilla。