Question

我对React很新，因此这个问题。我要以编程方式在React中的Login Screen和Sign Up屏幕之间切换。这是设计。

我要从这里过渡，

对此，

这些是我的组件，

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

问题在于，这甚至没有正确地执行路线。另外我还有以下问题。当组件被替换时，我想用较小的LogIn按钮替换Sign Up按钮。我不确定如何使用React Routing来做到这一点。

任何帮助表示感谢。

Answer 1

您在路线实施中缺少'Switch'和'exact'。路线应该像：

一样实施

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

React Navigation完全替换组件

1 个答案: