2-1 React 中的路由

最新推荐文章于 2025-04-29 01:47:03 发布

purple_lumpy

最新推荐文章于 2025-04-29 01:47:03 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

分类专栏：一个react简单项目

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/88991607

一个react简单项目专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在React项目中使用react-router-dom实现根据不同URL显示不同内容的功能。通过安装并配置BrowserRouter和Route组件，可以轻松地实现基本的导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由 - 根据不同的url地址显示不同的内容。

要使用路由，我们先安装它。

yarn add react-router-dom

然后，如何使用它显示不同的地址对应的页面呢。我们打开src/App.js 文件，如下。

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { GlobalStyle } from './style.js';
import Header from './common/header';
import store from './store/index';

class App extends Component {
  render() {
    return (
      <div>
        <GlobalStyle />
        <Provider store={store}>
          <Header />
        </Provider>
      </div>
    );
  }
}

export default App;

我们通过“/” 和 “/detail” 控制网页中显示的内容，如下。（其中，exact 属性表示地址能完全匹配上还会使用这个路由）

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { GlobalStyle } from './style.js';
import Header from './common/header';
import store from './store/index';

class App extends Component {
  render() {
    return (
      <div>
        <GlobalStyle />
        <Provider store={store}>
        <div>
          <Header />
          <BrowserRouter>
            <Route path='/' exact render={() => <div>home</div>}></Route>
            <Route path='/detail' exact render={() => <div>detail</div>}></Route>
          </BrowserRouter>
        </div>
        </Provider>
      </div>
    );
  }
}

export default App;