React小册入门(七)路由

React 路由基础

路由在前端开发中起着非常重要的作用。React Router 是 React 中最流行和常用的第三方库之一,它允许你把你的应用分成多个页面,同时无需刷新页面而进行页面跳转和状态管理。

React Router 安装和配置
首先,我们需要使用 npm 来安装 React Router。

npm install --save react-router-dom

这里我们选择下载 react-router-dom 依赖,它是 React Router 的 Web 版本,并且提供了大量易于理解和使用的 API。

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

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

上面代码中,我们首先从react-router-dom导入了必要组件来启用路由功能,然后我们利用 BrowserRouter 组件为我们的根组件包装,在其中设置多个 Route 组件构建页面路径,每个路径匹配不同的组件渲染。

动态路由

有时候你需要设置动态路由,例如当你需要携带一些参数并将其传递到页面时,通过 URL 传递参数通常是比较直接和清晰的方式。

<Router>
  <div>
    <ul>
      <li>
        <Link to="/blog/1">Blog 1</Link>
      </li>
      <li>
        <Link to="/blog/2">Blog 2</Link>
      </li>
      <li>
        <Link to="/blog/3">Blog 3</Link>
      </li>
    </ul>

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/blog/:id" component={Blog} />
    </Switch>
  </div>
</Router>

上面代码中,我们定义了一个动态路径 /blog/:id,用于匹配任意 Blog 页面,其中 :id 是可以被传递的参数。当该参数被改变时,注意该组件会重新渲染以反映这些变化。

function Blog(props) {
  return (
    <div>
      <h2>Blog</h2>
      <p>你现在正在看的博客 ID 是:{props.match.params.id}</p>
    </div>
  );
}

在Blog组件内部,我们直接获取到路由信息中传递的 :id 参数,并渲染到页面中。

最后

React Router 是 React 生态系统中最受欢迎的路由库。通过这篇文章,我们简单介绍了 React Router 的基础知识以及如何构建和实现简单页面跳转和动态路由。React Router 还具有更强大的功能,例如程序化路由、redirects 和路由守卫等等,如果你对这些感兴趣,可以深入研究细节。

你可能感兴趣的:(react.js,javascript,前端)