简述如何使用4.0版本的 React Router？

React面试题 5月前 0 55

React Router v4采用了一种全新的、组件化的路由配置方式，下面我简单介绍一下使用方式。

安装：在开始使用React Router之前，我们需要先在项目中安装它。

npm install react-router-dom

导入组件：在你的React组件文件中，需要导入React Router提供的几个组件。

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

配置路由：使用<Router>组件包裹整个应用，然后使用<Route>组件来定义各个页面的路由。

<Router>
  <div>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>

    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </div>
</Router>

在这个例子中，我们定义了两个路由：”/”（首页）和”/about”（关于页面）。我们使用<Switch>组件来只渲染路径匹配的第一个<Route>或<Redirect>。然后我们使用<Link>组件来创建导航链接。

创建页面组件：每个<Route>组件都对应一个React组件，当URL匹配到该路由的path时，就会渲染对应的组件。

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

以上就是React Router 4的基本使用方法。

发表评论 取消回复

发表评论取消回复