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

Question

我正在使用 React JS 和 React Router。

这是我的代码：

这里是 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” 但是，问题是页面出现在上一页的下方。

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

Answer 1

将app.js中的form组件移到另一个页面

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="/" component={FormComponent} />
                <Route exact path="/somepath/component" component={SomeComponent} />
            </Switch>
        </Router>
    );
}

FormComponent 是：

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>
    );
}

还要确保在handleSubmit 中调用event.preventDefault 以避免在提交表单时重新加载页面。

路径path="/" 最初只会显示FormComponent，并在路径更改时将其删除。

如果form 组件必须在app.js 中：

您需要手动隐藏组件。所以，修改app.js 类似：

return (
    <>
        {this.props.location.pathname === '/' && (
            <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>
        )}
        <Router>
            <Switch>
                <Route exact path="/somepath/component" component={SomeComponent} />
            </Switch>
        </Router>
    </>
)

如果 location 属性不存在，导入 withRouter hoc 并将其包裹在 App 上

import { withRouter } from 'react-router-dom';
...
export default withRouter(App);

Answer 2

您的问题是 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;