Question

我正在使用React.js构建一个网站，如果我在一个带有动态查询参数的页面上（即/group/:groupId）并刷新页面，那么整个网站中一致的背景图像就会消失。这是源代码：

的index.html：

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
        <title>Book Blog React</title>

        <style>
        body {background-image:url(hpbackground.jpg);background-repeat:no-repeat;background-size:cover;height:100%; background-attachment: fixed;}

        html {height:100%}

        </style>

        <link href="/static/css/main.03b6e96f.css" rel="stylesheet">
      </head>
      <body>



        <div id="root">
        </div><script type="text/javascript" src="/static/js/main.0fbf6d9f.js">



      </script>
    </body>
</html>

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';
import { Container, Row } from 'react-grid-system';
import { Provider } from 'react-redux';
import store from './redux/store';
import createBrowserHistory from 'history/createBrowserHistory';
import Home from './components/Home';
import Login from './components/Login';
import CreateAccount from './components/CreateAccount';
import CreateBookGroup from './components/CreateBookGroup';
import AddMembers from './components/AddMembers';
import BookGroup from './components/BookGroup';
import MyGroups from './components/MyGroups';
import CommentPage from './components/CommentPage';

const browserHistory = createBrowserHistory();

ReactDOM.render(
  <center>
    <Provider store={store}>
      <Router history={browserHistory}>
        <div>
          <Route exact path="/" history={browserHistory} component={Home} />
          <Route path="/login" history={browserHistory} component={Login} />
          <Route path="/createAccount" history={browserHistory} component={CreateAccount} />
          <Route path="/createBookGroup" history={browserHistory} component={CreateBookGroup} />
          <Route path="/addMembers" history={browserHistory} component={AddMembers} />
          <Route path="/bookGroup/:userId" history={browserHistory} component={BookGroup} />
          <Route path="/groups" history={browserHistory} component={MyGroups} />
          <Route path="/post/comments/:postId" history={browserHistory} component={CommentPage} />
        </div>
      </Router>
    </Provider>


  </center>
  , document.getElementById('root'));

有人知道我可以解决这个问题的方法吗？我尝试创建一个背景样式并将其添加到包含index.js中所有路由的div中，但是当我刷新它时，它不会一直延伸到html屏幕的底部。它只会扩展到组件中的项目。谢谢你提前帮忙。

刷新React.js

0 个答案: