Question

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

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

当前，当我单击“登录”按钮时，“这是测试”将呈现在按钮下方，而不是在新页面上呈现。网址会更新，但是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

基本上，Route道具合适时，总是渲染path元素。

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

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

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 JS中创建新页面

1 个答案: