2017-06-03 16 views
2

フロントエンドでReactとReact-routerで動作するエクスプレスアプリケーションを作成しようとしています。だから、私はindex.htmlファイルを読み込み、反応ルータに残りのルーティングを処理させます。しかし、エクスプレスルートを持っていない反応ルータのURLを持つページをリフレッシュすると、明らかに{できない}というメッセージが表示されます。だから、ルートがないときに常にindex.htmlを返すすべてのルートの後にフォールバックルートを追加しました。Expressフォールバックルートはスタティックファイルにも使用されます

"/ api/..."、 "/"、 "*"へのルートがあるので、 "/ public/build"と "/ app/src/static /" 。 "/"を呼び出すとすべてがうまく動作しますが、 "*"を呼び出すとindex.htmlが読み込まれますが、index.jsとstyles.cssファイルにはindex.htmlのコンテンツが読み込まれます。そのため、私のブラウザはHTMLの束を含むstyles.cssファイルを取得しますが、 "/"ルートを使用する場合は、.jsファイルと.cssファイルが正しく読み込まれます。

"/"に移動すると、すべての静的ファイルでインデックスページが正しく読み込まれます。私は自分の反応ルータのDom NavLinkを使って、リクエストをサーバーに返さずに異なるビューにナビゲートすることができます。私は直接、任意の反応-ルータのDOMページをロードしようとすると、しかし、私は私のindex.htmlを得るが、私のindex.jsはStyles.cssを

私のコードで同じ、index.htmlに同じ内容を持っています

const app = express(); 

app.use(bodyParser.urlencoded({ extended: true})); 
app.use(bodyParser.json()); 

passportConfig(passport); 
app.use(passport.initialize()); 
app.use(passport.session()); 

app.use('/api/user', userRoutes); 
app.use('/api', championRoutes); 

app.use('/public/build', express.static(__dirname + '/public/ReactApp/build')); 
app.use("/app/src/static/image", express.static(__dirname + '/public/ReactApp/src/static/image')); 
app.use("/app/src/static/style", express.static(__dirname + '/public/ReactApp/src/static/style')); 

app.get('/', (req, res) => { 
    res.sendFile(path.resolve(__dirname, '..', 'index.html')); 
}); 

app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, '..', 'index.html')); 
}); 

app.listen(8080,() => { 
    console.log('started on port 8080'); 
}); 

userRoutes変数とchampionRoutes変数には、ルートがいくつか設定されているexpress.Routerオブジェクトが含まれています。

編集:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <link href="app/src/static/style/styles.css" rel="stylesheet" /> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <div id="app"></div> 

     <script 
       src="https://code.jquery.com/jquery-3.2.1.min.js" 
       integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
       crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="public/build/index.js"></script> 
    </body> 
</html> 
+0

あなたがindex.html' 'で' index.js'ファイルが含まれているどのように投稿することができます? – squgeim

+0

@squgeim確かに完全なhtmlページの編集を参照してください –

答えて

1
<script src="public/build/index.js"></script> 

あなたがhttp://somedomain.com/page2である場合、これは場所が現在のパスに相対的であることを意味し、すなわち、index.jsへのパスはhttp://somedomain.com/page2/public/build/index.jsになります(これはあなたの中にケースにはindex.htmlファイルが配信されます)。

/でパスを開始し、代わりにあなたのURLのベースからの相対パスを指定するには:

<script src="/public/build/index.js"></script> 
+0

うわーは私がこのような愚かな間違いをしたとは信じられません。ありがとう –

関連する問題