React中如何基于URL切换导航栏的Contact/Back按钮？

你想根据当前URL切换按钮的想法非常合理，只是之前的写法没用到正确的URL获取方式而已。核心逻辑就是判断当前页面的路径，根据路径渲染对应的按钮，下面分几种常见场景给你具体实现方案：

纯原生JavaScript实现 #

如果是没有用框架的静态页面，直接用浏览器提供的window.location.pathname就能拿到当前路径（比如/或者/about），然后做条件判断：

// 获取当前页面的路径（不带域名部分）
const currentPath = window.location.pathname;

// 获取导航栏里要放按钮的容器
const buttonContainer = document.getElementById('navbar-button');

// 根据路径渲染按钮
if (currentPath === '/') {
  buttonContainer.innerHTML = '<button>Contact</button>';
} else if (currentPath === '/about') {
  // 给Back按钮加上返回上一页的功能，体验更好
  buttonContainer.innerHTML = '<button onclick="window.history.back()">Back</button>';
} else {
  // 其他路径默认显示Contact按钮
  buttonContainer.innerHTML = '<button>Contact</button>';
}

React项目实现（用React Router） #

如果是React项目，通常用react-router-dom来管理路由，用useLocation钩子就能拿到当前路径：

import { useLocation } from 'react-router-dom';

function Navbar() {
  const location = useLocation();

  return (
    <nav className="navbar">
      {/* 这里放其他导航链接 */}
      
      {location.pathname === '/' ? (
        <button>Contact</button>
      ) : location.pathname === '/about' ? (
        <button onClick={() => window.history.back()}>Back</button>
      ) : (
        <button>Contact</button>
      )}
    </nav>
  );
}

export default Navbar;

Vue项目实现（用Vue Router） #

Vue项目里可以直接通过$route.path获取当前路径，用指令做条件渲染：

<template>
  <nav class="navbar">
    <!-- 其他导航元素 -->
    
    <button v-if="$route.path === '/'">Contact</button>
    <button 
      v-else-if="$route.path === '/about'"
      @click="$router.back()"
    >Back</button>
    <button v-else>Contact</button>
  </nav>
</template>

核心思路总结 #

你最初写的{localhost:5000/ && <button>Contact</button>}思路是对的，但问题在于localhost:5000/是一个固定字符串，不是当前页面的实际URL。我们需要用浏览器或框架提供的API获取当前真实的路径，再和目标路径（/、/about）做比较，就能实现按钮的切换啦。

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