使用React路由实现页面导航的示例代码_Javascript

什么是react router？

react router是一个用于react应用程序的标准路由库，它允许你在单页面应用程序（spa）中快速、简单地实现路由功能。通过react router，您可以在不重新加载整个页面的情况下，轻松地在组件之间进行导航。

安装react router

要在项目中使用react router，首先需要将其安装到你的react应用中。在命令行中运行以下命令：

npm install react-router-dom

安装完成后，我们就可以开始配置react router了。

基本用法

创建基本路由

首先，我们需要在应用中设置路由。创建一个新的react组件，例如home, about, 和 contact，这些组件将代表不同的页面。

// src/home.js
import react from 'react';

const home = () => {
  return <h1>欢迎来到主页！</h1>;
};

export default home;

// src/about.js
import react from 'react';

const about = () => {
  return <h1>关于我们</h1>;
};

export default about;

// src/contact.js
import react from 'react';

const contact = () => {
  return <h1>联系我们</h1>;
};

export default contact;

接下来，在主组件中配置router。在src/app.js中进行如下修改：

// src/app.js
import react from 'react';
import { browserrouter as router, route, switch, link } from 'react-router-dom';
import home from './home';
import about from './about';
import contact from './contact';

const app = () => {
  return (
    <router>
      <div>
        <nav>
          <ul>
            <li><link to="/">主页</link></li>
            <li><link to="/about">关于我们</link></li>
            <li><link to="/contact">联系我们</link></li>
          </ul>
        </nav>
        
        {/* 使用switch来确保一次只有一个route被渲染 */}
        <switch>
          <route path="/" exact component={home} />
          <route path="/about" component={about} />
          <route path="/contact" component={contact} />
        </switch>
      </div>
    </router>
  );
};

export default app;

在上面的代码中，我们使用browserrouter组件来包裹整个应用。link组件用于在不同页面之间创建导航，而route组件则定义了特定路径下渲染的组件。

运行示例

现在，你可以使用以下命令启动项目：

npm start

在浏览器中访问http://localhost:3000，你将看到导航列表。点击“关于我们”和“联系我们”链接后，页面内容将即时更改，而不需要重新加载。

进阶用法

嵌套路由

react router支持嵌套路由。如果你的应用有更复杂的结构，比如用户页面下的子页面，你可以这样做：

首先，创建一个user组件，并在其中添加子路由。

// src/user.js
import react from 'react';
import { route, link, switch } from 'react-router-dom';

const user = ({ match }) => {
  return (
    <div>
      <h2>用户页面</h2>
      <ul>
        <li><link to={`${match.url}/profile`}>个人资料</link></li>
        <li><link to={`${match.url}/settings`}>设置</link></li>
      </ul>

      <switch>
        <route path={`${match.path}/profile`} component={userprofile} />
        <route path={`${match.path}/settings`} component={usersettings} />
      </switch>
    </div>
  );
};

const userprofile = () => {
  return <h3>用户个人资料</h3>;
};

const usersettings = () => {
  return <h3>用户设置</h3>;
};

export default user;

然后，在主路由中添加user组件的路由定义：

// src/app.js
import user from './user';

// 在switch内部添加user的路由
<route path="/user" component={user} />

利用路由参数

react router还支持动态路由参数，这使得你可以在url中传递参数。

// src/user.js
const user = ({ match }) => {
  return (
    <div>
      <h2>用户页面</h2>
      <ul>
        <li><link to={`${match.url}/1`}>用户1</link></li>
        <li><link to={`${match.url}/2`}>用户2</link></li>
      </ul>
      
      <switch>
        <route path={`${match.path}/:userid`} component={userdetail} />
      </switch>
    </div>
  );
};

// 用户详情组件
const userdetail = ({ match }) => {
  return <h3>用户id: {match.params.userid}</h3>;
};

现在，当你访问/user/1或/user/2时，它将显示相应的用户id。