时间戳

首页 > 解决方案 > React Navigation 完全替换组件

reactjs - React Navigation 完全替换组件

问题描述

我对 React 很陌生，因此是这个问题。我必须在 React 中以编程方式在登录屏幕和注册屏幕之间切换。这就是设计。

我必须从这个过渡， 在此处输入图像描述

对此，

在此处输入图像描述

这些是我的组件，

const Login = () => (
    <div className="login">
        <input className="top" placeholder="Email"/>

        <input className="bottom" placeholder="Password"/>
        <p>Forgot Password?</p>
        <button>Log In</button>

        <div className="imageholder">
            <img src={OrImage} alt=""/>
        </div>
        <div className="heading">
            <h1>Don't have an account yet?</h1>
        </div>



    </div>

);

export default Login

const Register = () => (
    <div className="register">

        <input className="top" placeholder="Full Name"/>

        <input className="bottom" placeholder="Username"/>

        <input className="bottom" placeholder="Email"/>

        <input className="bottom" placeholder="Mobile number"/>

        <input className="bottom" placeholder="Password"/>

        <input className="bottom" placeholder="Confirm Password"/>


        <button>Sign Up</button>

        <div className="imageholder">
            <img src={OrImage} alt=""/>
        </div>


    </div>
);
export default Register

这是带有路线的容器，

const FormHolder = () => (
    <div className="formholder">

        <section className="heading">
            <h1>Enter the world's first </h1>
            <h1>one-stop platform for football fans</h1>
        </section>
        <BrowserRouter>
        <section className="swappable">

            <Route path="/" render={() =>  <Login title="Login"/> }/>
            <Route path="/register" render={() => <Register title="Sign Up"/>}/>
            <NavLink to="/"><button className="registerButton">Sign Up </button></NavLink>

        </section>
        </BrowserRouter>


    </div>
);

export default FormHolder

问题是这甚至不能正确地执行路线。另外我有以下问题。当组件被替换时，我想用较小的登录按钮替换注册按钮。我不确定如何使用 React Routing 来做到这一点。

任何帮助表示赞赏。

标签： reactjsreact-router

解决方案

您在路由的实现中缺少“切换”和“精确”。路由应该像这样实现：

<section className="swappable">
  <BrowserRouter>
    <Switch>
      <Route exact path="/" render={() =>  <Login title="Login"/> }/>
      <Route path="/register" render={() => <Register title="Sign Up"/>}/>
    </Switch>
  </BrowserRouter>
</section>

推荐阅读