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

Question

我是 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;

Answer 1

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

因此，只要 url 为“/SupervisorDashboard”，您就会呈现您的 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;