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

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

reactjs

Reactjs 组件呈现在同一页面上，而不是在React JS中的新页面上,reactjs,Reactjs,我对React JS是个新手，实际上我只花了几天的时间。我目前正在尝试处理不同页面之间的导航基本上，我目前想做的是，当我在SignInfo屏幕上单击“登录”时，我希望它导航到一个新的“SupervisorDashboard”页面，该页面当前有一个虚拟的h1文本，上面写着“这是一个测试” 当前，当我单击“登录”按钮时，“这是一个测试”在按钮下方呈现，而不是在新页面上呈现。url更新，但h1文本显示在同一页面上，而不是新页面上我在StackOverflow和其他网站上尝试了大量的解决方案，但似乎

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

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

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

我在StackOverflow和其他网站上尝试了大量的解决方案，但似乎都不起作用，这让我觉得我犯了一个小错误。任何人都可以看看我的signinfo.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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Link，Route}；
从“../pages/SupervisorDashboard”导入SupervisorDashboard；
类SignInfo扩展组件{
render（）{
返回(
CNIC
登录
);
}
}
导出默认符号信息；

基本上，当

路径

道具合适时，

路线

元素总是被渲染

因此，只要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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Link，Route}；
从“../pages/SupervisorDashboard”导入SupervisorDashboard；
类SignInfo扩展组件{
render（）{
返回(
{
返回(
CNIC
登录
);
}}/>
);
}
}
导出默认符号信息；