Question

我决定我需要停止使用HasRouter，而改为使用BrowserRouter。

我从以下位置关闭了所有进口商品：

import { HashRouter} from 'react-router-dom';

到

import { BrowserRouter } from 'react-router-dom';

以及我所有的方块：

<HashRouter>

到

<BrowserRouter>

我的应用几乎表现出预期。我的应用程序中的所有链接都可以正常工作。

例如：

<Link to={{pathname: `/budget/${item.id}`, state: params}}>{item.name}</Link>

按预期更新了我的URL，并导航到该组件。

我的历史记录也适用：

 handleEditRow(paymentNumber) {
        this.props.history.push(`/schedule/${this.state.scheduleId}/event/${paymentNumber}`);
    }

但是，我所有的NavBar按钮都失败了。 URL会按预期更新，但我的应用程序未加载组件：

我的路线在：

  return (
        <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/accounts" component={Accounts} />
           ....
        </Switch>
        )
   }

我认为这是可行的，因为上面的链接正在运行。

在我的NavBar中，我只做简单的链接：

<Nav.Link as={NavLink} to='/accounts' exact>Accounts</Nav.Link>

我找到了一个提到使用“ Link”而不是NavLink的链接。

<Nav.Link as={Link} to='/accounts' exact>Accounts</Nav.Link>

但这仍然失败。 URL更新，但页面没有变化。

正如我所说，URL会按预期更改，但该应用程序不会加载该应用程序。

但是，如果我随后在地址栏中选择URL，然后按Enter键（加载它更改为的URL），则该应用程序将按预期加载正确的组件。

有人可以发现我的错误吗？

与HashRouter正常运行。

Answer 1

快速提示：如果不确定使用哪个路由器，可以将其导入为别名“路由器”。然后，如果您决定切换到另一个路由器，则不必将所有HashRouter引用都更改为BrowserRouter：

import { BrowserRouter as Router } from 'react-router-dom';

然后使用：

<Router>

这种方法的优点是您只需更改导入即可直接使用。

Answer 2

正如您在评论中所说，一个应用程序中不能再有BrowserRouter个。

这就是为什么它不起作用

将HashRouter更改为BrowserRouter-导航栏不再起作用，但链接有效

2 个答案: