React Router跳转/chart/:sym路由时点击链接仅更新URL不渲染页面问题

• 直接在浏览器地址栏输入完整URL，可以正常在不同页面间完成导航加载
• 点击页面内的链接触发跨页导航时，地址栏URL已经成功变更，但页面组件不会同步更新渲染，必须手动刷新页面才能加载对应内容
• 异常仅出现在/chart/:sym参数路由上，其余所有路由的跳转功能均运行正常

App.js 路由配置 #

<Switch>
  <Route exact path={["/", "/home"]} component={Home} />
  <Route exact path="/login" component={Login} />
  <Route exact path="/register" component={Register} />
  <Route exact path="/profile" component={Profile} />
  <Route path="/user" component={BoardUser} />
  <Route path="/mod" component={BoardModerator} />
  <Route path="/admin" component={BoardAdmin} />
  <Route exact path="/chart">
    <Chart symbol='nkla'/>
  </Route>
  {/* 异常问题对应的代码位置 */}
  <Route path="/chart/:sym">
    <Chart symbol=''/>
  </Route>
</Switch>

Chart 组件核心逻辑 #

export default function Chart(props) {
  const { sym } = useParams();
  const [symbol, setsymbol] = useState(sym);
  const [curSelection, setcurSelection] = useState("intraday-prices");
  const [isLoaded, setisLoaded] = useState(false);
  const [data, setdata] = useState({});
  const [error, seterror] = useState(null);
  const [gainers, setgainers] = useState([]);

  function toggle() {
    fetch(`${process.env.REACT_APP_API}/${symbol}/${curSelection}?token=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(
        (result) => {
          let chartData = [];
          let chartLabels = [];
          for (let i = 0; i < result.length; i++) {
            if (result[i].average !== null) {
              if(curSelection!="intraday-prices"||(curSelection=="intraday-prices"&&i%5==0)) {
                chartData.push(result[i].close.toFixed(2));
                chartLabels.push(result[i].label);
              }
            }
          }
          setisLoaded(true);
          setdata({  
            labels: chartLabels,
            datasets: [
            {
              label: symbol,
              fill: false,
              lineTension: 0.1,
              backgroundColor: 'rgba(0,0,0,0)',
              borderColor: 'rgba(0,0,0,1)',
              borderWidth: 1,
              data: chartData
             }
           ]})
        },
        (error) => {
          setisLoaded(true);
          seterror(error)
        }
      )
  }

  useEffect(()=>{
    fetch(`${process.env.REACT_APP_API}/market/list/gainers?token=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(
        (result) => {
          setgainers(result)
          console.log(result);
        })
    toggle()
  },[curSelection])

  return (
    <div>
      <div style={{display:"flex"}}>
        {gainers.slice(-5).map((element)=>{
          return <div key={element.symbol} className="card" style={{width: "25rem",margin:10,paddingLeft:2,paddingTop:2}}>
            <Link to={"/chart/"+element.symbol}>
              <p>{element.symbol}</p>
            </Link>
          </div>
        })}
      </div>
      <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/ytd")}>YTD</button>
      <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/2y")}>2 year</button>
      <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/5y")}>5 year</button>
      <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/1y")}>1 year</button>
      <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/1m")}>1 month</button>
      <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/6m")}>6 month</button>
    </div>
  )
}

index.js 根路由配置 #

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

• 同路由模式下的组件复用机制：当从一个/chart/:sym路径跳转到另一个同格式路径时，两个路径匹配的是同一个路由规则，React Router不会卸载并重建Chart组件，只会复用现有组件实例，路由参数变化时不会触发组件的重新初始化流程。
• 状态初始化逻辑失效：组件用useState(sym)初始化symbol状态，这个初始化逻辑只在组件第一次挂载时执行一次；组件被复用、路由参数更新时，存储在状态里的symbol值不会跟着同步变化。
• 副作用触发条件不完整：负责拉取图表数据的useEffect，依赖数组只包含curSelection，没有把路由参数sym纳入依赖范围；路由参数变化时，副作用不会重新执行，自然不会重新拉取对应股票的数据，页面也就不会更新。
• 冗余无效代码：两个路由配置里给Chart组件手动传的固定symbol属性（分别是'nkla'和空字符串），在组件代码里根本没有被读取使用，属于无意义的冗余传值。

• 简化路由配置：移除路由规则里冗余的symbol传值，让Chart组件统一通过useParams读取路由参数
• 调整组件逻辑：
  • 删掉冗余的symbol状态变量，直接基于当前路由的sym值做逻辑判断：如果路由没有匹配到sym参数（即/chart路径），给个默认值比如'nkla'
  • 把sym添加到useEffect的依赖数组里，路由参数变化时自动触发数据拉取
  • 拉取请求时直接用当前的sym值拼接接口地址，避免使用过期的状态值

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