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 时，当我们直接设置位置时，它开始工作。