React Router 总是渲染 NotFound 默认组件

Question

我一直在互联网上搜索解决方案，但可惜我来这里寻求帮助。问题是 URL 发生了变化，但是相应的组件没有Route呈现，而是NotFoundPage呈现了。这是App.js Router代码：<Router history={history}>   <Switch>     <PrivateRoute exact path="/" component={HomePage} />     <Route path="/login" component={LoginPage} />     <Route path="/register" component={RegisterPage} />     <Route component={NotFoundPage}/>   </Switch></Router>这是PrivateRoute代码：import React from 'react';import { Route, Redirect } from 'react-router-dom';export const PrivateRoute = ({ component: Component, ...rest }) => (    <Route {...rest} render={props => (        localStorage.getItem('user')            ? <Component {...props} />            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />    )} />)我面临的问题是，当我转到/is NotFoundPagerendered 而不是LoginPage URL正确重定向并更改为/login. 但是当我刷新时，它LoginPage被渲染了。同样，当我单击/register从LoginPageURL 更改但RegisterPage不呈现它的链接时，它是相同的NotFoundPage。

Answer 1

这种奇怪的行为源于使用自定义历史记录。

const customHistory = createBrowserHistory();
ReactDOM.render(<Router history={customHistory} />, node);

当它被使用时，路由器不会对位置路径的变化做出反应。直到你不添加：

<Switch location={window.location}>

根据文档，默认情况下 switch 中的位置设置为窗口。location 但出于某种原因，当您不使用 BroswerRouter 或 StackRouter 而只是 Router 时，当我们直接设置位置时，它开始工作。