react 路由写法
在React中,可以使用React Router库来实现路由功能。以下是一个基本的路由写法示例:
1. 首先,需要安装React Router库。可以通过以下命令进行安装:
```shell
npm install react-router-dom
```
2. 在需要使用路由的组件中,导入所需的路由组件。例如,可以使用`BrowserRouter`、`Route`、`Link`等组件。
```jsx
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
```
3. 在组件的render方法中,使用`Router`组件包裹整个应用,并定义各个路由的路径和组件。
```jsx
<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>
```
在上面的示例中,定义了两个路由,一个是根路径“/”对应的组件是Home,另一个是路径“/about”对应的组件是About。当用户访问不同的路径时,对应的组件将会被渲染出来。
4. 可以在组件内部使用`Link`组件来定义链接,`Link`组件的`to`属性指定了链接的目标路径。例如:
```jsx
function Home() {
  return (
    <div>
      <h2>Home</h2>
      <Link to="/about">Go to About</Link>
    </div>
reactrouter6路由拦截  );
}
```
在上面的示例中,当用户点击“Go to About”链接时,将会跳转到路径“/about”。