[英]React router v4 not working on build
我在使用react-router-dom在生產中工作時遇到了麻煩。 當我的app頁眉和頁腳呈現得很好時,路由器不起作用,我可以看到以下注釋,我的路線應該在檢查Chrome devtools中的html時出現。 我沒有控制台錯誤。
<div>
<!-- react-empty: 15 -->
<!-- react-empty: 16 -->
<!-- react-empty: 17 -->
<!-- react-empty: 18 -->
</div>
這是我的App.js組件文件:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import styled from 'styled-components';
import Header from 'components/Header';
import Footer from 'components/Footer';
import Home from 'containers/Home';
import Select from 'containers/Select';
import Process from 'containers/Process';
import Privacy from 'containers/Privacy';
const AppWrapper = styled.div`
font-family: 'Open Sans', sans-serif;
width: 100%;
max-width: calc(768px + 16px * 2);
margin: 0 auto;
display: flex;
height: 100%;
flex-direction: column;
`;
class App extends Component {
...
render() {
return (
<Router>
<AppWrapper>
<Header/>
<div>
<Route exact path='/' render={({history}) =>
<Home infoHandler={this.handleUserInfo}
imageHandler={this.handleImage}
history={history}/>
}/>
<Route exact path='/select' render={({history}) =>
<Select info={this.state.userInfo}
image={this.state.userImage}
selectionHandler={this.handleSelectedImage}
history={history}/>
}/>
<Route exact path='/process' render={({history}) =>
<Process image={this.state.selectedImage} user={this.state.userInfo}/>
}/>
<Route exact path='privacy' component={Privacy}/>
</div>
<Footer/>
</AppWrapper>
</Router>
)
}
}
export default App;
這是我的index.js文件:
import React from 'react';
import {render} from 'react-dom';
import App from 'containers/App';
render(<App />, document.getElementById('app'));
路由器在開發模式下像魅力一樣工作。 使用Webpack進行構建。
**主頁組件:
import React, {Component} from 'react';
import FacebookLogin from 'components/FacebookLogin';
import {Row, Col} from 'react-flexbox-grid';
import styled from 'styled-components';
import palette from 'palette';
const Img = styled.img`
max-width: 100%;
`;
const H3 = styled.h3`
color: ${palette.black};
`;
class Home extends Component {
render() {
return(
<Row center='xs'>
<Col xs={12}>
<Img src="https://res.cloudinary.com/julsgc/image/upload/v1491106020/Boletia_995x380__2_fqawa8.png"/>
</Col>
<Col xs={12}>
<h3> A que Ser Extraordinario te pareces!? </h3>
</Col>
<Col xs={12}>
<p> Averigualo ahora! </p>
</Col>
<Col>
<FacebookLogin
infoCallback={this.props.infoHandler}
imageCallback={(data) => {
this.props.imageHandler(data);
this.props.history.push('/select');
}}/>
</Col>
</Row>
);
}
}
Home.propTypes = {
history: React.PropTypes.object
}
export default Home;
*更新*
應用程序現在切換到哈希路由器后工作。 任何進一步的評論,因為BrowserRouter是根據文檔推薦的方法。
在httacces文件中使用以下代碼
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
如果您的應用程序不在根文件夾中,則使用
<BrowserRouter basename="/the-app">
**還有更多評論檢查鏈接https://www.andreasreiterer.at/fix-browserrouter-on-apache/
請看一下這個主題
如果你正在使用Webpack,那么只需添加 -
devServer{
historyApiFallback: true
}
對於gulp
使用以下內容:
historyApiFallback = require('connect-history-api-fallback')
//start a local dev server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
middleware: [ historyApiFallback() ]
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.