javascript - React Router 导航到页面出现在当前页面下方

问题描述

我正在使用 React JS 和 React 路由器。

这是我的代码：

这是 SomeComponent 文件：

class SomeComponent extends React.Component{

    //some code
    
    
    render(){
        return(
            
                <div className="somecomponent">
                    <h1>some heading</h1>
                </div>  
        );
    }

}

export default SomeClass;

这是我的 App.js 文件：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import SomeComponent from './components/SomeComponent';
class SomeClass extends React.Component{
    constructor(props){
       //some code
    }
    
    render(){
        return(
            <Router>
                <form onSubmit={this.handleSubmit}>
                    <h1>ABC</h1>
                    <label htmlFor="name">Your name</label>
                    <input className="name" type="text" placeholder="Enter your name" />
                    <button onClick={() => this.props.history.push("/somepath/component")}>Click Me</button>
                </form>
                    
                <Switch>
                    <Route exact path="/somepath/component" component={SomeComponent} />
                </Switch>
            </Router>
        );
    }

}

export default SomeClass;

这是我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
    (
        <BrowserRouter>
            <App />
        </BrowserRouter>
    ),
  document.getElementById('root')
);

布局：

这是 App.js 组件：

这是以下链接中的组件：“/somepath/component”：

当我单击“单击我”按钮时，两个组件都出现在彼此的顶部。

我的问题：

当我单击该按钮时，它会将我定向到以下链接的页面：“/somepath/component” 但是，问题是该页面出现在上一页的下方。

导航到新页面后，我想让上一页消失。

标签： javascriptreactjsreact-reduxreact-routerreact-hooks

您的问题是form元素不在路由组件上。如果您这样写，form将始终可见（并且SomeComponent始终出现在底部form）。您应该将其移动form到组件中。就像是：

class SomeComponent extends React.Component{
  ...
  render(){
   return (
      <form onSubmit={this.handleSubmit}>
         <h1>ABC</h1>
         <label htmlFor="name">Your name</label>
         <input className="name" type="text" placeholder="Enter your name" />
         <button onClick={() => this.props.history.push("/somepath/component")}>Click Me</button>
      </form>
   );
  }
}
export default FormComponent;

然后在 App.js 中：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import SomeComponent from './components/SomeComponent';
import FormComponent from './components/FormComponent';
class SomeClass extends React.Component{
    constructor(props){
       //some code
    }
    
    render(){
        return(
            <Router>
                <Switch>
                    <Route exact path="/" component={FormComponent} />
                    <Route exact path="/somepath/component" component={SomeComponent} />
                </Switch>
            </Router>
        );
    }

}

export default SomeClass;

javascript - React Router 导航到页面出现在当前页面下方

问题描述

解决方案

推荐阅读