Reactjs路由导致页面渲染问题

Question

我有以下的App.js文件：

function App() {
  return (
    <div className="App">
    <Header></Header>
    <HomePage></HomePage>             
    </div>
  );
}

任何访问网站的用户默认应该首先看到主页。

我有一个导航菜单，其中包含以下路由信息：

<Router>
<Switch>                                                
    <Route path='/login' component={Authentication} />                                              
</Switch>
</Router>

当我点击登录菜单链接时，认证页面会加载，但是当我在浏览器中向下滚动时，还可以看到下面的主页内容。如何仅加载路由中引用的页面？

解决方案：

向路由中添加以下路由。

<Route exact path='/' component={Home} />

- sotn

---

App 是否在路由上被渲染？这两个代码片段之间有什么关联？ - Drew Reese

没有在路由上呈现任何应用程序。Header组件有一个登录链接，它与一个路由相关联。 - sotn

Answer 1

Route 中的不同路径显示不同页面（在Route 的组件属性中），这里有一个演示和 react-router 文档可能会帮助你。祝你好运！

• react-router-v4-demo
• react 路由器文档

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

- Winky

---

已更新原帖并附上解决方案。 - sotn

Answer 2

你必须在 Route 部分添加 "exact path" 关键字，如下所示： <Route exact path="/" component={Home} /> 如果不使用 "exact"，它将呈现所有路由包含 "/" 的组件。

- Md. Rakibul Islam

Answer 3

对于这个问题，请使用“exact”。

    <Route exact path="/">
        <Home />
    </Route>

- Mahima Chouhan