仅用React与React Router能否实现双路由渲染同组件？是否需Redux？

完全没问题，不用依赖Redux这类状态管理库，靠React本身的状态机制加上React Router的路由配置就能搞定你的需求。下面是具体的实现思路和示例：

1. 路由配置与权限控制 #

首先用React Router分别定义两个路由：一个是需要认证的可编辑路由，另一个是无需认证的只读路由。你可以自定义一个PrivateRoute组件来做路由守卫，确保只有已认证用户能访问编辑路由，未认证用户会被自动重定向到只读路由。

2. 状态共享：通过状态提升实现 #

既然你当前的状态都是通过props向下传递，那只需要把组件需要的共享状态提升到两个路由的共同父组件中。这样不管用户访问哪个路由，目标组件都能拿到同一份状态（如果需要状态同步的话），编辑路由还能获取到修改状态的方法。

3. 目标组件适配两种模式 #

让目标组件通过接收props来区分“可编辑”和“只读”模式：比如传一个isEditable布尔值，再根据这个值渲染不同的UI（输入框/纯文本），编辑模式下还要传递状态更新的回调函数。

示例代码 #

import { useState } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

// 自定义路由守卫：保护需要认证的路由
const PrivateRoute = ({ children }) => {
  // 这里假设你有自己的认证状态判断逻辑，比如从context或localStorage获取
  const isAuthenticated = localStorage.getItem('authToken') !== null;
  
  return isAuthenticated ? children : <Navigate to="/view" />;
};

// 你的目标组件
const TargetComponent = ({ content, onContentChange, isEditable }) => {
  return (
    <div className="component-container">
      <h2>内容展示</h2>
      {isEditable ? (
        <textarea
          value={content}
          onChange={(e) => onContentChange(e.target.value)}
          rows={5}
          cols={50}
        />
      ) : (
        <p>{content}</p>
      )}
    </div>
  );
};

// 父组件：管理共享状态 + 配置路由
const App = () => {
  // 共享状态：这里就是你原本通过props传递的状态
  const [content, setContent] = useState('这是初始内容');

  const handleContentChange = (newContent) => {
    setContent(newContent);
  };

  return (
    <div className="app">
      <Routes>
        {/* 认证可编辑路由：只有已认证用户能访问 */}
        <Route path="/edit" element={
          <PrivateRoute>
            <TargetComponent 
              content={content} 
              onContentChange={handleContentChange} 
              isEditable={true} 
            />
          </PrivateRoute>
        } />

        {/* 未认证只读路由：所有用户都能访问 */}
        <Route path="/view" element={
          <TargetComponent content={content} isEditable={false} />
        } />
      </Routes>
    </div>
  );
};

export default App;

额外说明 #

如果后续你的应用复杂度上升，比如需要在很多不相关的组件间共享状态，或者有复杂的状态流转逻辑，那Redux这类状态管理库会让状态维护更高效。但就你当前的需求而言，React的状态提升+React Router的路由配置完全足够，没必要引入额外的库。

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