Question

在导航时，整个页面被加载，而不是特定的组件。

“路线”页面：

       <BrowserRouter>
        <Switch>
            <Route exact path="/" component={LandingPage}/>
            <Route exact path="/contact" component={Contact} />
            <Route exact path="/about-us" component={AboutUs} />
            <Route exact path="/services" component={Services} />
            <Route exact path="/products" component={Products} />
        </Switch>
        </BrowserRouter>

导航栏：

       <NavItem>
          <NavLink href="/">
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            href="/about-us"
          >
          About Us
          </NavLink>
        </NavItem>

App.js：

         <BrowserRouter>
           <Route component={Routes}/>
         </BrowserRouter>

通常，当我们单击导航栏中的导航链接时，它将提供所需的组件，而无需加载整个页面，此处将加载整个页面。

反应版本：16.8.6

Answer 1

您是否正在使用React-routers NavLink，否则请尝试

import { NavLink } from 'react-router-dom'

<NavLink to="/about-us">About</NavLink>

注意：所使用的道具不是href

在Routes组件中使用它时，App.js中不需要<BrowserRouter/>了

Answer 2

将导航组件放置在<Switch/>组件的顶部或外部，这样它就可以接收props作为url以及其他许多内容，以便从其父目录（<BrowserRouter/>）进行导航，然后仅渲染其中的内容<Switch/>。

您可以这样简化组件：

        const Routes = (
            <BrowserRouter>
                <NavigationBar />
                <Switch>
                    <Route exact path="/" component={LandingPage} />
                    <Route exact path="/contact" component={Contact} />
                    <Route exact path="/about-us" component={AboutUs} />
                    <Route exact path="/services" component={Services} />
                    <Route exact path="/products" component={Products} />
                </Switch>
            </BrowserRouter>
        )

也请避免将<BrowserRouter/>嵌套在另一个内部 <BrowserRouter/>。

避免使用href进行导航，因为您将刷新所有正在运行的js代码，然后将再次请求整页，要使用React Router进行导航，您必须在{{1}中使用导航} API，为此，您有2个选择：

语义上：随时随地导入history
```
<Link/>
```

以编程方式：将新网址推送到历史记录api

    import {Link} from "react-router-dom"
    ...
    <Link to="./new-url"/>

记住：为了使其正常工作，您需要将道具传递给实际组件。

整个页面在导航时加载

2 个答案: