我有以下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} />
答案 0 :(得分:5)
Route
中的不同路径显示了不同的页面(Route
中的component属性),这是一个演示,而react-router文档可能会为您提供帮助。祝你好运!
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>;
}
答案 1 :(得分:0)
您必须在“路线”部分中添加“精确路径”关键字,如下所示:
<Route exact path="/" component={Home} />
如果您不使用“精确”,它将渲染包含“ /”的所有组件。
答案 2 :(得分:0)
对此问题使用准确的信息。
<Route exact path="/">
<Home />
</Route>