gpt4 book ai didi

Reactjs 路由导致页面渲染问题

转载 作者:行者123 更新时间:2023-12-03 14:22:16 24 4
gpt4 key购买 nike

我有以下 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} />

最佳答案

Route中的不同路径显示不同的页面(Route 中的组件属性),这里是一个演示,react-router 文档可能会帮助你。祝你好运!

  • react-router-v4-demo
  • react router docs

  • 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>;
    }

    关于Reactjs 路由导致页面渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63293111/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com