React基于URL动态切换组件文本与影视元信息排版方案

1. 根据URL动态切换组件文本 #

useLocation() 是React Router的官方API，完全适配该场景，使用逻辑如下：

• 确保项目已安装react-router-dom，且应用根组件被BrowserRouter包裹
• 将所有影片的介绍内容抽离为路径映射配置，以路由路径为键匹配对应内容
• 组件内调用useLocation()获取当前访问路径，从配置中读取对应内容渲染，无匹配时返回默认内容

改造后的Text.js代码：

import React from 'react';
import { useLocation } from 'react-router-dom';
import './Text.css';

// 全量影视内容配置，新增影片直接追加条目即可
const contentMap = {
  // 默认兜底内容
  default: {
    overview: `Sherlock Holmes lives in 21st century London, a city filled with mystery, crime and deceit. The back streets are alive with robbers, blackmailers, smugglers and serial killers. When the police are desperate they call upon Mr Sherlock Holmes and his unconventional methods of deduction to shed light on the matter. Holmes is assisted by his flatmate and friend, Dr John Watson, who has returned from military service in Afghanistan with the Royal Army Medical Corps.`,
    meta: {
      "film genre": "criminal drama",
      "country of production": "United Kingdom",
      "original language": "English",
      "the creators": "Mark Gatiss, Steven Moffat",
      "number of episodes": 13,
      "number of seasons": 4
    }
  },
  // /mindhunter路径对应内容
  '/mindhunter': {
    overview: `The series tells about the work of FBI special agents Holden Ford and Bill Tench, who in 1977 cooperate to develop methods of prosecuting serial killers and to analyze the causes of their crimes.” - Netflix

"Mindhunter" is a story inspired by real events about the beginnings of using psychoanalysis and a psychological approach in solving criminal cases. To this end, the FBI launches a special project in which serial killers are interrogated while serving their crimes. Through a series of research, interviews, talks and psychological sessions, they try to get to their motives, learn about the patterns of the murderers' minds, in order to be able to easily capture those who are still at large.`,
    meta: {
      "film genre": "criminal drama, thriller",
      "country of production": "United States",
      "original language": "English",
      "the creators": "Joe Penhall",
      "number of episodes": 19,
      "number of seasons": 2
    }
  }
};

const Text = () => {
  const { pathname } = useLocation();
  const currentContent = contentMap[pathname] || contentMap.default;

  return (
    <div className="container_text">
      <h1>Overview</h1>
      <div className="overview_wrap">
        {currentContent.overview.split('\n').map((para, idx) => (
          <p key={idx}>{para}</p>
        ))}
      </div>
      <div className="meta_wrap">
        {Object.entries(currentContent.meta).map(([label, value]) => (
          <div key={label} className="meta_row">
            <span className="meta_label">{label}:</span>
            <span>{value}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Text;

2. 影视元信息存储与规整展示 #

最优实现方式为结构化存储+遍历渲染：

• 不要将元信息拼接为长文本，所有元信息以「字段名:字段值」的键值对形式统一存储，和组件渲染逻辑解耦，后续新增、修改内容无需调整渲染代码
• 渲染时遍历元信息对象，每个条目单独占一行，天然实现规整排版，也方便自定义样式
• 所有影视内容统一维护在映射配置中，新增页面只需要追加配置项即可

补充Text.css样式，实现逐行排版效果：

.container_text{
    background-color: #202020;
    width: 40%;
    border-radius: 15px;
    padding: 50px;
    flex-wrap: wrap;
    color: #ffffff;
}
.overview_wrap p {
    line-height: 1.6;
    margin: 0 0 16px;
}
.overview_wrap p:last-of-type {
    margin-bottom: 24px;
}
.meta_row {
    line-height: 1.8;
}
.meta_label {
    font-weight: 600;
    margin-right: 6px;
}

效果参考 #

内容的提问来源于stack exchange，提问作者Konrad