#javascript #reactjs #react-router #refresh #page-refresh
#javascript #reactjs #реагирующий маршрутизатор #обновить #страница-обновить
Вопрос:
Я хочу использовать боковую панель при переходе по ссылкам с использованием маршрута React, но когда я обновляю страницу, содержимое исчезает
Урок.jsx
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Home from "./components/Example";
import './css/activeLink.css'
const routes = [
{
path: "/",
exact: true,
sidebar: () => null,
main: () => <h2>Home1</h2>
},
{
path: "/bubblegum",
sidebar: () => null,
main: () => <Home />,
},
{
path: "/shoelaces",
sidebar: () => null,
main: () => <h2>Shoelaces</h2>
}
];
export default function Lesson() {
return (
<Router>
<div style={{ display: "flex" }}>
<div className={"sidebar"}>
<ul style={{ listStyleType: "none", padding: 0 }}>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/bubblegum">Bubblegum</Link>
</li>
<li>
<Link to="/shoelaces">Shoelaces</Link>
</li>
</ul>
<Switch>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.sidebar />}
/>
))}
</Switch>
</div>
<div className={"sidebar_content"}>
<Switch>
{routes.map((route, index) => (
// Render more <Route>s with the same paths as
// above, but different components this time.
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.main />}
/>
))}
</Switch>
</div>
</div>
</Router>
);
}
App.js
функция App() {
const { value } = useDarkMode(false);
return (
<ParallaxProvider>
<Route path='/Lessons' render={() => <Lesson value={value}/>}/>
</ParallaxProvider>
);
}
экспорт приложения по умолчанию;
index.js
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
Я думаю, проблема понятна, когда страница обновляется, содержимое исчезает, на других страницах все работает нормально. Я взял этот код из другого проекта, но там все работает нормально.
Комментарии:
1. Есть ли у вас какие-либо ошибки, отображаемые в окне терминала?
2. Да, вот ссылка ibb.co/4pyK3FN
Ответ №1:
Я думаю, что это проблемы с условным рендерингом. Он работает асинхронно
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Home from "./components/Example";
import './css/activeLink.css'
const routes = [
{
path: "/",
exact: true,
sidebar: () => null,
main: () => <h2>Home1</h2>
},
{
path: "/bubblegum",
sidebar: () => null,
main: () => <Home />,
},
{
path: "/shoelaces",
sidebar: () => null,
main: () => <h2>Shoelaces</h2>
}
];
export default function Lesson() {
return (
<Router>
<div style={{ display: "flex" }}>
<div className={"sidebar"}>
<ul style={{ listStyleType: "none", padding: 0 }}>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/bubblegum">Bubblegum</Link>
</li>
<li>
<Link to="/shoelaces">Shoelaces</Link>
</li>
</ul>
<Switch>
{routes?.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.sidebar />}
/>
))}
</Switch>
</div>
<div className={"sidebar_content"}>
<Switch>
{routes?.map((route, index) => (
// Render more <Route>s with the same paths as
// above, but different components this time.
<Route
key={index}
path={route.path}
exact={route.exact}
children={<route.main />}
/>
))}
</Switch>
</div>
</div>
</Router>
);
}
Комментарии:
1. У меня нет четкого представления о вашей проблеме