Reactjs 反应路由器NavLink不更改为新组件

我正在尝试使用react路由器在react应用程序中重新路由到新页面。当前，当我单击Projects导航链接时，它正在将url从

localhost:3000

更改为

localhost:3000/Projects

，但是页面没有更改。点击链接后，我必须按搜索栏上的enter键才能进入新页面

我的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>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
);
}
}

我的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>

从'react router dom'导入{NavLink，BrowserRouter}//我导入的内容
从“react scroll”导入{Link}；
项目

---

有什么原因使它不能工作吗？

在你的NavBar.js中，尝试

项目

，而不仅仅是项目。

我想你在创建属性之前忘记了

项目

中的“/”。试试这个：

项目

---

只需使用app.js或index.js之类的

包装最外层的组件。

您不需要在浏览器路由器中包装navbar.js。而是在app.js的浏览器路由器中移动导航栏组件。确保组件位于浏览器路由器内，但在交换机外。这应该可以做到

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