history.push() 给出 404

Question

我正在尝试在使用历史记录进行身份验证时使用重定向用户，但出于某种原因，它给了我 404。这些是我的路由器，我正在用它们导出历史记录。

export let history = createBrowserHistory();

<Router history={history}>
        <div>
            <Header />
        </div>
        <Switch>
            <Route path="/" component={LoginPage} />
            <Route path="/dashboard" component={ExpenseDashboardPage} />
            <Route path="/add" component={AddExpense} />
            <Route path="/edit/:id" component={EditExpensePage} />
            <Route path="/help" component={HelpPage} />
            <Route component={NotFoundPage} />
        </Switch>
    </Router>

在我的 app.js 中，我正在导入并使用它。在我的控制台中，我已注销，因此它应该重定向到“/”但不是。

let hasRendered = false;
const renderApp = () => {
    if (!hasRendered) {
        ReactDOM.render(jsx, document.getElementById("root"));
        hasRendered = true;
    }
}

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        console.log("Log in");
        store.dispatch(startSetExpense()).then(() => {
            renderApp();
            if (history.location.pathname === '/') {
                history.push('/dashboard');
            }
        });
    }
    else {
        console.log('Logout');
        renderApp();
        history.push('/');
    }
});

编辑 1： 我尝试调试程序，发现问题不在于路由，而在于路由器或历史记录。这些路由与 BrowserRouter 完美配合。

编辑 2： renderApp 只渲染应用程序

let hasRendered = false;
const renderApp = () => {
    if (!hasRendered) {
        ReactDOM.render(jsx, document.getElementById("root"));
        hasRendered = true;
    }
};

Answer 1

像下面这样更新路由路径：

<Switch>
    <Route path="/" component={LoginPage} exact />
    <Route path="/dashboard" component={ExpenseDashboardPage} />
    <Route path="/add" component={AddExpense} />
    <Route path="/edit/:id" component={EditExpensePage} />
    <Route path="/help" component={HelpPage} />
    <Route path="*" component={NotFoundPage} />
</Switch>

Answer 2

请像这样更新并检查。我通常这样使用它并且效果很好：

<Switch>
    <Route exact path="/" component={LoginPage} />
    <Route exact path="/dashboard" component={ExpenseDashboardPage} />
    <Route exact path="/add" component={AddExpense} />
    <Route exact path="/edit/:id" component={EditExpensePage} />
    <Route exact path="/help" component={HelpPage} />
    <Route path="/" component={NotFoundPage} />
</Switch>

Answer 3

使用 react-router v5.2.0 和 history v4.9.0 来完成这项工作。

https://codesandbox.io/s/quizzical-dan-z3725

或

尝试使用 BrowserHistory https://reactrouter.com/web/example/basic

当我们使用不同的版本时，customHistory 似乎有一些问题

最初在这里回答：

history.push() 给出 404

history.push() giving 404

reactjs

browser-history