React路由器,重新加载404,在webpack中使用historyApiFallback为true

时间:2017-05-14 17:15:25

标签: reactjs webpack react-router

我正在使用react-router-bootstrap和react-router V4,以及用于开发的Webpack

我的问题是我创建了诸如/ services / firstService之类的路径,但在重新加载时它提供了404

我得到了 index.js

ReactDOM.render(
    <Router>
        <App />
    </Router>
    , document.getElementById('container'));

然后我的 App.jsx 这是我的“主要”组件

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation/>
                <div className="content">
                    <Route exact={true} path="/" component={Home}/>
                    <Route exact={true} path="/home" component={Home}/>
                    <Route path="/services" component={Services}/>
                    <Route path="/infos" component={Infos}/>
                    <Route path="/contacts" component={Contacts}/>
                    <Route path="/basic" component={BasicComponent}/>
                </div>
            </div>
        );
    }
}

导航组件只是一个react-router-bootstrap / react-bootstrap链接

export default class Navigation extends React.Component {
    render() {
        return (
            <Navbar>
                <Nav>
                    <LinkContainer to="/home">
                        <NavItem eventKey={1}>Home</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/services">
                        <NavItem eventKey={2}>Services</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/infos">
                        <NavItem eventKey={3}>Infos</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/contacts">
                        <NavItem eventKey={4}>Contacts</NavItem>
                    </LinkContainer>
                </Nav>
            </Navbar>
        );
    }
}

Services组件是我想要显示组件{FirstService}并将路径更改为/ services / firstService的地方,同样适用于secondService

export default class Services extends React.Component {
    constructor(props) {
        super( props );
    }

    render() {
        return (
            <div>
                ul/li
                <Link to={`${this.props.match.url}/firstService`}>
                    firstService
                </Link>
                <Link to={`${this.props.match.url}/firstService`}>
                    firstService
                </Link>
                ul/li
                <Route path={`${this.props.match.url}/firstService`} component={FirstService}/>
                <Route path={`${this.props.match.url}/secondService`} component={SecondService}/>
            </div>
        );
    }
}

由于它是另一个组件,this.props前面需要match.url(这是我的第一个问题)

但是现在,如果我重新加载页面,我收到以下消息:

'GET localhost:8080/services/index_bundle.js 404 (Not Found)'

我的webpack.config.js

/*
./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html'
})

module.exports = {
    entry: './src',
    output: {
        path: __dirname + "/builds",
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}
        ]
    },
    plugins: [HtmlWebpackPluginConfig],
    devServer: {
        historyApiFallback: true
    }
}

2 个答案:

答案 0 :(得分:1)

index.html文件中的捆绑导入从相对路径<script src="index_bundle.js"></script>更改为绝对<script src="/index_bundle.js"></script>。当你获得services路线时,你的捆绑包相对于网址路径(&#39; / services&#39;)被加载并且无处可去(404 Not Found)。

答案 1 :(得分:1)

确保在index.html中设置正确的base tag<base href="/">