Возникла следующая проблема: в моем приложении два экрана: один, если у пользователя есть доступ, и один, если нет. Если пользователь имеет доступ к системе, он будет перенаправлен на экран A, частный маршрут с внутренними состояниями, при изменении частных маршрутов внутреннее состояние этого экрана A должно продолжаться до тех пор, пока он не изменится на частный илинеизвестный маршрут.
Дело в том, что у меня есть вектор частных маршрутов, но когда я зацикливаю эти маршруты и добавляю ключ к каждому компоненту Маршрутизатора, при каждом изменении маршрута он отключается и монтирует компонент А ( Кодобразец здесь ), поэтому я теряю внутреннее состояние A, и если я добавляю ключ к дочернему компоненту A, внутреннее состояние остается, как мне хотелось бы ( Пример кода здесь ), однакоЯ нарушаю правило ключа реакции ребенка.
Warning: Each child in a list rule should have a unique" key "prop.
Любая помощь будет удивительной! :)
@ Редактировать: фрагмент кода первой песочницы. Разница между первым и вторым - это ключевая опора, вместо этого она находится внутри Маршрута, она находится внутри компонента.
@ Редактировать 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>
);
}