Question

我正在使用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
    }
}

Answer 1

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

Answer 2

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

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

2 个答案: