Блог

Главная - Вопросы по программированию - Отображается верхний и нижний колонтитулы маршрутизатора React, но не содержимое страницы при обновлении

Отображается верхний и нижний колонтитулы маршрутизатора React, но не содержимое страницы при обновлении

#reactjs #react-router-dom

#reactjs #react-router-dom

Вопрос:

Я использую маршрутизатор react, и когда страница загружается нормально, если я перехожу туда с другой страницы, но если я обновляю страницу или ввожу только URL <Header /> и <Footer /> отображаю.

Рассматриваемая страница является /admin/messageRules/all . Вот мой код маршрутизатора:

 import React from "react";
import {Redirect, Route, BrowserRouter as Router, Switch} from "react-router-dom";

import Footer from "./components/Footer";
import Forgot from "./components/Forgot";
import Header from "./components/Header";
import Home from "./components/Home";
import Login from "./components/Login";
import MessageRules from "./components/MessageRules";
import PrivacyPolicy from "./components/PrivacyPolicy";
import Register from "./components/Register";
import Reset from "./components/Reset";
import TermsOfUse from "./components/TermsOfUse";

export const App = () => (
    <Router>
        <div>
            <Header />
            <Switch>
                <Route exact path="/admin" component={Home} />

                <Route path="/admin/messageRules/all" component={MessageRules} />
                <Route path="/PrivacyPolicy" component={PrivacyPolicy} />
                <Route path="/TermsOfUse" component={TermsOfUse} />

                <Route path="/Register" component={Register} />
                <Route path="/Login" component={Login} />
                <Route path="/Forgot" component={Forgot} />
                <Route path="/Reset" component={Reset} />
            </Switch>
            <Footer />
        </div>
    </Router>
);

export default App;

Обновить

Консоль выводит эту ошибку:

 error:  SyntaxError: Unexpected token < in JSON at position 0
    at Navbar._callee$ (Navbar.jsx:31)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:1337/front.js:46313:21)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

Комментарии:

1. Рассматривали ли вы возможность использования Switch , а не просто набора Route символов?

2. Итак, если вы нажмете ссылку для перехода "/admin/messageRules/all" , она работает нормально, но при обновлении она не загружается MessageRules ?

3. @jonrsharpe Я новичок в react router и я просмотрел коммутаторы, но поможет ли это мне с этой проблемой?

4. @TomFinney это верно. Он загружает страницу, но показывает только верхний и нижний колонтитулы без содержимого messageRules.

5. Видите ли вы какие-либо ошибки или предупреждения в консоли? Требуется ли этому компоненту какие-либо данные, которые будут загружены другими компонентами? Я не знаю, повлияет ли переключение на что-либо, это было просто первое, что бросалось в глаза.

Ответ №1:

Проблемы были с expressjs. У меня было:

 app.get("/admin", (req, res, next) => { ... });

и изменил его на:

 app.get("/admin*", (req, res, next) => { ... });

Причина, на которую ссылается ошибка Navbar , заключалась в том, что она каким-то образом пыталась отобразить некоторый код с целевой страницы сайта, а не администратора.

Спасибо за помощь!