React Router是一个用于构建单页面应用的库,它可以帮助我们在React应用中实现路由功能。在React Router中,我们可以使用<Switch>
组件来设置默认子路由,并相应地修改URL。
要设置默认子路由,我们可以在<Switch>
组件中使用<Route>
组件,并将exact
属性设置为true
。这样,当URL与该路由的路径完全匹配时,该路由将被渲染。
下面是一个示例代码:
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Redirect to="/" />
</Switch>
</Router>
);
}
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function Contact() {
return <h1>Contact Page</h1>;
}
在上面的代码中,我们使用了<Switch>
组件来包裹多个<Route>
组件,并使用exact
属性将根路径/
设置为默认子路由。当URL为/about
或/contact
时,对应的组件将被渲染。如果URL不匹配任何一个路由路径,我们使用<Redirect>
组件将用户重定向到根路径/
。
领取专属 10元无门槛券
手把手带您无忧上云