使用React-Router-4,可以通过编程方式设置索引路由/
。下面是一个示例代码:
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const App = () => (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
{/* Home页面的内容 */}
</div>
);
const About = () => (
<div>
<h2>About</h2>
{/* About页面的内容 */}
</div>
);
const Contact = () => (
<div>
<h2>Contact</h2>
{/* Contact页面的内容 */}
</div>
);
export default App;
在上述代码中,我们使用BrowserRouter
作为路由容器,并在<Router>
组件内部定义了三个<Route>
组件,分别对应了根路径/
、/about
和/contact
。exact
属性用于确保只有在路径完全匹配时才会渲染对应的组件。
你可以根据实际需求修改<Route>
组件的component
属性,将其指向你想要渲染的组件。这样,当用户访问根路径时,将会渲染Home
组件的内容。
领取专属 10元无门槛券
手把手带您无忧上云