Рендеринг маршрутов, если я использую карту вместо статических компонентов
В моем приложении есть 2 маршрута: /validations (это список) и /validations/:id (тот же список, ориентированный на конкретный элемент).
Я изначально писал свои маршруты статически, и все работает (как и ожидалось):
<Route path = "/validations/:id" component = {Validations} />
<Route path = "/validations" component = {Validations} />
Однако, поскольку я хотел провести некоторый рефакторинг, я поместил маршруты в массив и использовал .map для их рендеринга. Но при этом, когда я нажимаю на элемент, вся страница перерисовывается, и я теряю прокрутку списка (это плохой UX для пользователя, потому что он теряет то место, где был в списке):
const routes = [
{
path: '/validations/:id',
component: Validations,
},
{
path: '/validations',
component: Validations,
},
]
// ...and in the JSX...
{routes.map(({ path, component }) => (
<Route
key = {path}
path = {path}
component = {component}
/>
))}
Еще более странно, если я удалю опору key из Route, я верну первоначальное поведение (но у меня есть предупреждение от React).
Я что то не так написал? Это ошибка реактивного маршрутизатора? Реагировать?
Как я могу сохранить прокрутку списка с моим отображением маршрута?
Вот репродукция: https://codesandbox.io/s/vm71x2k46l
Да, потому что при последующей навигации вы будете на том же маршруте. Это переход от /validations к /validations/:id, что заставляет список прокручиваться.
Да, я сошел с ума, но я знаю, что происходит
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Сначала вам нужно сопоставить маршруты за пределами компонента приложения. Затем вы можете добавить их сопоставленные маршруты в приложение в примере {routeComponents}
const routeComponents = routes.map(({ path, component }, key) => <Route exact path = {path} component = {component} key = {key} />);
const App = () => (<BrowserRouter><div>{routeComponents}</div></BrowserRouter>);
Также в validation.js у вас есть предупреждение в строке {items.map ...}. Я добавил опору ключ в ссылку, и ошибка исчезла
{items.map((item, index) => (
<Link to = {`/validations/${index}`} key = {index}>
Item {index}
</Link>
))}
вот URL-адрес песочницы https://codesandbox.io/s/8n2rlpmw0l
Это не работает, список все равно прокручивается вверх.
Я знал, что что-то не так, потому что делал это много раз и не получал ваших результатов. Итак, я заметил, что вы показываете свою боковую панель внутри своим маршрутом.
Вот почему он выполняет повторный рендеринг и устанавливает все наверх. Потому что вы фактически переходите по другому маршруту.
Что вы должны сделать, так это установить на боковой панели за пределами фактические маршруты, а внутри - компонент Маршрутизатор.
Как в этой песочнице: https://codesandbox.io/s/p2r4pl2o3q
Если вы заметили, я немного изменил маршруты:
const routes = [
{
path: "/",
component: Index
},
{
exact: true,
path: "/validations",
component: Validations
},
{
path: "/validations/:id",
component: Validations
}
];
А затем создал компонент боковой панели и установил его вне маршрутов.
<BrowserRouter>
<div>
<Sidebar />
<div style = {{ marginLeft: 150 }}>{routeComponents}</div>
</div>
</BrowserRouter>
Боковая панель:
var items = Array.apply(null, Array(300)).map(function(x, i) {
return i;
});
export default () => (
<div
style = {{
width: 150,
height: "100vh",
display: "flex",
overflow: "auto",
position: "absolute",
flexDirection: "column"
}}
>
{items.map((item, index) => (
<Link to = {`/validations/${index}`} key = {index}>
Item {index}
</Link>
))}
</div>
);
Теперь после первого щелчка прокрутка не сбрасывается.
PS: Пожалуйста, не обращайте внимания на стилистические решения, я просто пытался увидеть, что что-то работает.
Спасибо за предложение, все работает. Однако, как вы можете догадаться, мое приложение намного сложнее, чем это воспроизведение, и я не могу извлечь «боковую панель». Это то, что должно оставаться в компоненте маршрута.
@Kerumen Вы всегда можете обойти это. Вы всегда можете использовать порталы! Регулировка положения прокрутки с помощью scrollTop элемента возможна, но довольно сложно реализовать и подвержена ошибкам из-за стиля указанных компонентов.
это странно. Он прокручивает только верхнюю часть при первой навигации. Последующие переходы работают как положено