Question

我遇到以下问题：我的应用程序中有两个屏幕，如果用户具有访问权限，则显示一个屏幕，如果没有，则显示一个屏幕。如果用户有权访问系统，则他将被重定向到具有内部状态的专用路由屏幕A，当专用路由更改时，该屏幕A的内部状态应继续，直到他更改为非专用或未知路线。

重点是，我有一个私有路由向量，但是当我循环这些路由并向每个路由器组件添加一个密钥时，每次更改路由时，它将卸载并装载组件A（Code sample here），因此我会丢失A的内部状态，并且如果将密钥添加到A的子组件中，则内部状态将保持我想要的状态（Code sample here），但是我违反了子密钥的反应规则。

Warning: Each child in a list rule should have a unique" key "prop.

任何帮助都将是惊人的！：）

@Edit：第一个沙箱的代码段。第一个和第二个之间的区别是关键道具，相反，它位于Route内部，位于组件内部。

@编辑2：我已修复它静态声明所有路由并让访问策略具有动态性的问题。求助！如果有人找到更好的解决方案，那就好了！：）

  { canAccess: true, path: "/home", component: () => <div>Home</div> },
  { canAccess: true, path: "/foo", component: () => <div>Foo</div> },
  { canAccess: false, path: "/blah", component: () => <div>Blah</div> }
];

const Homepage = () => {
  return (
    <div>
      <Link to="/home">Home</Link>
      <br />
      <Link to="/foo">Foo</Link>
      <br />
      <Link to="/blah">Blah</Link>
    </div>
  );
};

const Main = ({ children }) => {
  const [innerState, setInnerState] = useState(112);
  return (
    <div>
      {children}
      {JSON.stringify(innerState)}
      <br />
      <button onClick={() => setInnerState(innerState + 1)}>AddNumber</button>
      <Homepage />
    </div>
  );
};

const PrivateRoute = ({ component: Component, path, canAccess, index }) => (
  <Route
    key={index}
    path={path}
    render={() =>
      canAccess ? (
        <Main>
          <Component />
        </Main>
      ) : (
        <div>Not found :(</div>
      )
    }
  />
);

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          {defaultRoutes.map((route, index) => {
            return PrivateRoute({ index, ...route });
          })}
          <Route path="/" exact component={() => <Homepage />} />
          <Route component={() => <div>Not found :(</div>} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

Answer 1

我已修复此问题，它以静态方式声明了所有路由，并使访问策略具有动态性。求助！如果有人找到更好的解决方案，那就好了！：）

更改路线时要重新安装组件

1 个答案: