强制preact-router完全重新加载页面

Question

我有一个页面，该页面包含指向创建记录的辅助页面的链接。这是我遇到的问题：如果我填写了第二页上的字段，然后返回以创建另一个项目，则以前的数据仍在我的文本框中。

我不知道这是否是精确的用法。我认为通过调用route会卸载该组件，从而清除状态。我什至尝试将唯一的密钥添加到我的路线中（我听说这迫使它们卸下）。

我真的很机智。

app.jsx

const App = () => (
    <div>
        <Header/>
        <Router history={createHashHistory()}>
            <Home path="/" />
            <DisplayUsers key="displayUsers" path="/display-users"/>                
            <CreateUser key="createUser" path="/create-user"/>                              
        </Router>
    </div> 
);

create-item.jsx

import { h, Component } from "preact";
import { route } from 'preact-router';
import { $post } from "app/services/ajax.jsx";
import Section from "app/components/section/section.jsx";
import UserList from "app/components/user-list/user-list.jsx";

class CreateUser extends Component {
    constructor(props) {
        super(props);

        this.state = {
            userName:       "",
            route:          ""
        };
    }       
    handleSubmit = (event) => {
        event.preventDefault();

        $post("/api/users", this.state, () => 
            {
                route('/display-users');
            }
        );
    }
    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }   
    render() {
        return (
            <Section title="New User">
                <form onSubmit={this.handleSubmit}>
                    <div className="mat-field">
                        <label 
                            htmlFor="userName"
                            className="mat-field__label">
                            User Name:
                        </label>    

                        <input
                            type="text"
                            id="userName"
                            name="userName"
                            className="mat-field__input"
                            autoComplete="off"
                            autoFocus="autoFocus"
                            maxlength="30"
                            required
                            onChange={this.handleChange}/>                          
                    </div>

                    <div className="mat-field">
                        <label 
                            htmlFor="route"
                            className="mat-field__label">
                            Route To:
                        </label>    

                        <UserList 
                            name="route" 
                            onChange={this.handleChange}/>              
                    </div>          

                    {/* Buttons */ }

                    <div>
                        <input 
                            type="submit" 
                            value="Create" 
                            className="mat-button mat-button--secondary mat-button--raised"/>
                        <a 
                            href="/display-users"
                            className="mat-button">Cancel</a>
                    </div>
                </form>
            </Section>
        );

    }
}

export default CreateUser;