React路由器页眉和页脚显示但不刷新页面内容

问题描述 投票:-1回答:1

我正在使用反应路由器,当页面加载正常,如果我从另一个页面导航,但如果我刷新页面或键入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;

Update

控制台正在打印此错误:

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)
reactjs react-router-dom
1个回答
0
投票

问题出在expressjs上。我有:

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

并将其更改为:

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

错误引用Navbar的原因是因为它以某种方式尝试从站点的登录页面而不是管理员呈现一些代码。

谢谢您的帮助!

© www.soinside.com 2019 - 2024. All rights reserved.