反应路由器 NavLink 不会更改为新组件答案

【问题标题】：React router NavLink not changing to new component反应路由器 NavLink 不会更改为新组件
【发布时间】：2021-01-13 08:53:03
【问题描述】：

我正在尝试使用反应路由器重新路由到我的反应应用程序中的新页面。目前，当我单击 Projects NavLink 时，它会将 URL 从 localhost:3000 更改为 localhost:3000/projects，但页面没有更改。点击链接后，我必须在搜索栏上按回车键才能进入新页面。

我的 app.js 看起来像这样

class App extends Component {
  
  render() {
    return (
      <div className="App">
        <NavBar />
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/projects" component={Projects} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

我的 NavBar.js 中的链接看起来像这样..

import { NavLink, BrowserRouter } from 'react-router-dom'//what I am importing
import { Link } from 'react-scroll'; 

 <BrowserRouter>
   <NavLink to="/projects">Projects</NavLink>
 </BrowserRouter>

为什么它不起作用？

【问题讨论】：

标签： reactjs routes react-router react-router-dom

【解决方案1】：

您无需将 navbar.js 包装在浏览器路由器中。而是在 app.js 中的浏览器路由器中移动导航栏组件。确保组件在浏览器路由器内但在交换机外。这应该可以解决问题

【讨论】：

【解决方案2】：

在您的 NavBar.js 中，尝试 <NavLink to="/projects">Projects</NavLink> 而不仅仅是项目。

【讨论】：

我已经尝试过了，但页面没有进行转换。当我右键单击 libk 并单击“在新选项卡中打开链接”时，它可以工作。

【解决方案3】：

我认为您在属性之前忘记了 <NavLink to="projects">Projects</NavLink> 中的“/”。尝试这个： <NavLink to="/projects">Projects</NavLink> 只需用<BrowserRouter></BrowserRouter> 像 app.js 或 index.js 一样包装你最外层的组件。

【讨论】：

我已经尝试过了，但页面没有进行转换。当我右键单击 libk 并单击“在新选项卡中打开链接”时，它可以工作。