Question

我正在尝试使用React中的Link，以便每次单击导航栏中的内容时都不会刷新我的页面，但是我不知道如何在不将Link元素放入A元素的情况下使其正常工作路由器内的JS文件。我想将其用于Navbar，并且将Navbar放在index.html文件中，因为它应该在每个页面上，所以我不想在每个组件中都包含它。我尝试拉出Navbar，并将其放入自己的组件中，然后将其添加到路由器中，但是那也不起作用。我已经附加了App.js文件，并且NavBar组件有点大，所以我不会完整介绍它，但是有一个小片段只是为了说明我如何尝试使用Link。我得到的错误是未捕获的错误：不变失败：您不应该在路由器外部使用Link。对此将提供任何帮助！

import NavBar from './NavBar';

function App(){
    const element = (
      <div>
        <BrowserRouter>
        <NavBar />
          {/* <nav>
            <Link to="/home" className="nav-link">Home</Link>
          </nav> */}
              <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/home" component={Home}/>
                <Route path="/contact" component={Contact}/>
                <Route path="/stocks" component={StockSearch}/>
                <Route path="/login" component={Login}/>
                <Route path="/*" component={PageNotFound}/>
              </Switch>
          </BrowserRouter>
      </div>

    );
    return element;
}

export default App;

下面是我的NavBar内容：

<li className="nav-item">
      <Link to="/stocks" className="nav-link">Stock Service</Link>
</li>

有没有办法在js文件之外使用React Link标签？

0 个答案: