Question

我正在使用React Router，并且如果从另一个页面导航到该页面时页面加载正常，但是如果刷新页面或仅输入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)

Answer 1

问题在于expressjs。我有：

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

并将其更改为：

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

错误引用Navbar的原因是因为它以某种方式试图从网站的目标页面而非管理员的页面呈现一些代码。

感谢您的帮助！

反应路由器标题和页脚显示，但刷新时不显示页面内容

更新

1 个答案: