modernjs 侧边栏路由设置
时间: 2023-08-21 08:06:39 浏览: 42
要设置侧边栏路由,你可以使用 React Router 和一个侧边栏组件来实现。以下是一个简单的示例:
1. 首先,在你的应用程序中安装并导入 React Router:
```
npm install react-router-dom
```
```
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
```
2. 创建一个侧边栏组件,它将包含你的侧边栏链接:
```
import { Link } from 'react-router-dom';
function Sidebar() {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
);
}
```
3. 创建你的路由组件,并将其包裹在 Router 组件中。在你的路由中,将你的组件与对应的路径匹配:
```
function App() {
return (
<Router>
<div>
<Sidebar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}
```
在这个例子中,Home、About、Contact 是三个组件,它们将分别与路径 /、/about 和 /contact 匹配。
4. 最后,在你的组件中,你可以使用 React Router 提供的 useHistory 和 useLocation 钩子来检测当前路径,并在侧边栏中高亮对应的链接:
```
import { useHistory, useLocation } from 'react-router-dom';
function Sidebar() {
const history = useHistory();
const location = useLocation();
const isActive = (pathname) => {
return location.pathname === pathname ? 'active' : '';
}
return (
<div>
<ul>
<li className={isActive('/')}><Link to="/">Home</Link></li>
<li className={isActive('/about')}><Link to="/about">About</Link></li>
<li className={isActive('/contact')}><Link to="/contact">Contact</Link></li>
</ul>
</div>
);
}
```
这个例子中,isActive 函数将检查当前路径是否与给定的路径匹配,如果匹配,则为该链接添加一个名为 active 的类。
这是一个简单的侧边栏路由设置的示例,你可以根据你的应用程序需要进行更改和扩展。