Reactjs 在刷新时显示页眉和页脚，但不显示页面内容

我正在使用react router，当页面加载时，如果我从另一个页面导航到那里，但如果我刷新页面或仅键入URL

和

呈现，则页面加载正常

有问题的页面是

/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;

从“React”导入React；
从“react Router dom”导入{Redirect，Route，BrowserRouter as Router，Switch}；
从“/components/Footer”导入页脚；
从“/components/Forget”导入忘记的内容；
从“/components/Header”导入标题；
从“/components/Home”导入主页；
从“/components/Login”导入登录名；
从“/components/MessageRules”导入MessageRules；
从“/components/PrivacyPolicy”导入PrivacyPolicy；
从“/components/Register”导入寄存器；
从“/components/Reset”导入重置；
从“/components/TermsOfUse”导入术语；
导出常量应用=（）=>(
);
导出默认应用程序；

更新 控制台正在打印此错误：

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)

错误：语法错误：JSON中位置0处的意外标记<
在Navbar._callee$（Navbar.jsx:31）
在tryCatch（runtime.js:45）
在Generator.invoke[as_invoke]（runtime.js:271）
在Generator.prototype.（匿名函数）[作为下一步](http://localhost:1337/front.js:46313:21)
在asyncGeneratorStep（asyncToGenerator.js:3）
at_next（asyncToGenerator.js:25）

问题出在expressjs上。我有：

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

并将其更改为：

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

错误引用

Navbar

的原因是它试图从站点的登录页而不是管理员页面呈现一些代码

---

谢谢你的帮助

您是否考虑过使用一个而不是一堆

路由

s？因此，如果您单击一个链接转到

“/admin/messageRules/all”

，它可以正常工作，但如果您刷新，它不会加载

MessageRules

？@jornsharpe我是react路由器的新手，我也看过交换机，但这能帮我解决这个问题吗？@TomFinney没错。它加载页面，但只显示页眉和页脚，不显示messageRules内容。您在控制台中看到任何错误或警告吗？该组件是否需要其他组件加载的任何数据？我不知道转换是否会有什么不同，这只是第一件引人注目的事情。