在 React JS 中在同一页面而不是新页面上呈现组件

IT技术 reactjs
2021-05-19 10:33:00

我是 React JS 的新手，实际上只花了几天时间。我目前正在尝试处理不同页面之间的导航。

基本上，我目前想要做的是，当我在 SigninForm 屏幕上单击“登录”时，我希望它导航到一个新的“SupervisorDashboard”页面，该页面目前有一个虚拟的 h1 文本，上面写着“这是一个测试”。

目前，当我单击“登录”按钮时，“这是一个测试”会在按钮下方呈现，而不是在新页面上呈现。url 更新，但 h1 文本显示在同一页面上而不是新页面上。

我在 StackOverflow 和其他网站上尝试了大量解决方案，但似乎都没有奏效，这让我觉得我犯了一个小错误。任何人都可以看看我的SignInForm.js代码并找出问题所在吗？：

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route} from 'react-router-dom';
import SupervisorDashboard from '../pages/SupervisorDashboard';


class SignInForm extends Component {



render() {

    return (

      <Router>

        <div className="FormCenter">

        <form className="FormFields" onSubmit={this.handleSubmit}>

          <div className="FormField">

            <label className="FormField__Label" htmlFor="cnic">CNIC</label>

            <input type="text" id="cnic" className="FormField__Input" placeholder="Enter your CNIC without dashes" name="cnic"/>

          </div>

          <div className="FormField">

          <Link to={{
              pathname: '/SupervisorDashboard'
            }} className="FormField__Button mr-20">Sign In</Link>

            </div>


        </form>

        <Route exact path="/SupervisorDashboard" component={SupervisorDashboard}>

        </Route>


      </div>


      </Router>
    );
}
}

export default SignInForm;
1个回答

基本上Route，当pathprops合适时，元素总是会被渲染。

因此，SupervisorDashboard只要 url 为“/SupervisorDashboard”，您就可以呈现您的内容。通过使用一个开关和多个Render元素，您可以根据您的 url 在所有渲染元素之间切换

我更正了你的代码。这是伪代码，我现在无法测试此代码，但是您应该看到我所做的更改：

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route} from 'react-router-dom';
import SupervisorDashboard from '../pages/SupervisorDashboard';

class SignInForm extends Component {

    render() {
        return (
            <Router>
                <Switch>
                <Route path="/" exact render={() => {
                    return (
                        <div className="FormCenter">
                            <form className="FormFields" onSubmit={this.handleSubmit}>
                                <div className="FormField">
                                    <label className="FormField__Label" htmlFor="cnic">CNIC</label>
                                    <input type="text" id="cnic" className="FormField__Input" placeholder="Enter your CNIC without dashes" name="cnic"/>
                                </div>
                                <div className="FormField">
                                    <Link to={{
                                        pathname: '/SupervisorDashboard'
                                    }} className="FormField__Button mr-20">Sign In</Link>

                                </div>
                            </form>
                        </div>
                    );
                }}/>
                <Route exact path="/SupervisorDashboard" component={SupervisorDashboard} />
                </Switch>
            </Router>
        );
    }
}

export default SignInForm;
其它你可能感兴趣的问题
上一篇React：获取组件的其中一个子组件的 DOM 位置 下一篇样式组件props的流类型不起作用