Javascript 使有状态的React组件一起工作时出现问题

我正在制作一个React应用程序，我正在努力获得状态正常的组件的基本功能。到目前为止，我已经有了一个连接到注册页面的主页，当我点击注册页面时，我可以处理用户输入。到目前为止，注册是我试图使用state的类组件

到目前为止，我已经在这个组件中设置了一个非常基本的流程，只是为了看看它是否有效。但是，当我单击按钮来记录当前存储的内容时，整个页面会重新加载，就好像什么都没有发生一样

它当前外观的基本显示：

import registerUser from './user.js';

class App extends Component {
    render() {
        return (
            <Router>
                <Route path='/register' component={registerUser}/>
            </Router>
        )
    }
}
export default App;

但是，正如我在单击按钮时提到的，整个页面只是重新加载，就好像什么都没有发生一样。我是否缺少一些基本的东西，比如为什么尝试在单独的组件中使用此方法会重新加载整个应用程序？

---

任何帮助都将不胜感激。

如果按钮位于表单中，则必须在handleChange函数中写入e.preventDefault

handleChange = (e) => {
    e.preventDefault();  //It will prevent form submit
    console.log('test');
}

---

注意：React组件名称应在PascalCase中，因此只需将registerUser替换为registerUser。

是否在任何地方使用表单？为什么在同一文件中有两个导出默认值？还有，为什么handleChange不是一个普通的函数，用onclick={evt=>this.handleChangeevt}按钮？@Mike'Pomax'Kamermans，OP有两个不同的文件，检查导入如果这是你唯一的设置，那么这个代码应该可以工作。如果您有其他代码，但没有张贴在这里，那么也请张贴它。一个建议是，React组件名称应该在PascalCase中，所以只需将registerUser替换为registerUser。抱歉不够具体，它们位于两个单独的文件中。它是使用路由器导入和打开的。但是，是的，只要我点击按钮，控制台日志基本上会闪烁这个单词，然后页面会重新加载。

handleChange = (e) => {
    e.preventDefault();  //It will prevent form submit
    console.log('test');
}