webpack React Router路由器无法从URL工作

iibxawm4 于 2023-05-18 发布在 Webpack

关注(0)|答案(4)|浏览(204)

我有一个应用程序，有以下路线：

export default class Content extends Component {
    constructor() {
        super();
    }
    render() {
        return (
            <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/restaurant/:id' component={Restaurant}/>
                    <Route path='/admin' component={Admin}/>
            </Switch>
        )
    }
}

路线在应用程序内工作正常。例如，如果我运行我的live-server命令，它会在http://127.0.0.1:8080/中弹出并运行路由。从那里我可以点击一个链接，带我到其他路线。然而，如果我试图通过URL去那里，它给我一个“无法获得/路由”错误。
这是一个问题，当我试图做的形式提交对这些路线的重定向到它的自我不再工作。
我正在使用webpack，并阅读了与它有关的内容，但没有找到解决方案。
这是我的webpack：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        './src/app.jsx', './src/sass/main.scss', './src/index.js'
    ],
    output: {
        path: __dirname + "/src",
        filename: 'bundle.min.js',
    },
    plugins: [
        new webpack.DefinePlugin({ // <-- key to reducing React's size
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        })
        // new webpack.optimize.UglifyJsPlugin(), //minify everything new
        // webpack.optimize.AggressiveMergingPlugin(), //Merge chunks
    ],
    watch: true,
    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        }, { // regular css files
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
        }]
    }
};

我没有使用任何服务器，这是我第一次使用路由，所以我很困惑。我使用live-server来部署我的react应用程序和webpack来构建和捆绑我的scss和jsx等。
谢谢你的帮助！

webpack

来源：https://stackoverflow.com/questions/49727524/react-router-routes-not-working-from-url

4条答案

按热度按时间

cs7cruho1#

在集成react-router之前，你需要配置你的fallback url：因此，如果您使用webpack为应用提供服务，请在webpack配置中添加以下内容：

devServer: {
  historyApiFallback: true
}

在React应用中，通常你会将<Route /> Package 在<Router />中，这样当URL改变时，<Router />将匹配其路由的分支，并呈现其配置的组件。请执行以下操作：

import { BrowserRouter as Router, Route } from 'react-router-dom';

export default class Content extends Component {
 constructor() {
   super();
 }
 render() {
  return (
    <Router>
      <div>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/restaurant/:id' component={Restaurant}/>
            <Route path='/admin' component={Admin}/>
        </Switch>
      </div>
    </Router>
)}
}

赞(0）回复(0）举报 2023-05-18

ecbunoof2#

对于开发环境，你需要设置webpack-dev-server来处理你的路由React，安装到你的依赖项中。
然后在package.jsonscripts部分中，启动脚本应该如下所示：

"scripts": {
   "start": "webpack-dev-server --watch"
}

然后在webpack配置对象的根目录下设置devServer：

devServer: {
  hot: true,
  contentBase: './',
  historyApiFallback: true
},

对于生产环境，您需要编写自己的ssr或使用任何ssr库，如next.js

赞(0）回复(0）举报 2023-05-18

62lalag43#

在这样的应用程序中（仅限前端），问题是浏览器无法处理/any-route，因为它们不存在，所以它返回您看到的错误。
为了解决这个问题，在开发工具中有一些选项，如live-server中的entry-file。
根据它的描述，它应该做的工作。

--entry-file=PATH - serve this file (server root relative) in place of missing files (useful for single page apps)

赞(0）回复(0）举报 2023-05-18

krcsximq4#

import { HashRouter, Route } from 'react-router-dom';

export default class Content extends Component {
 constructor() {
   super();
 }
 render() {
  return (
    <HashRouter>
      <div>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/restaurant/:id' component={Restaurant}/>
            <Route path='/admin' component={Admin}/>
        </Switch>
      </div>
    </HashRouter>
)}
}

在我看来，你应该使用HashRouter而不是BrowserRouter。部署应用后，由于BrowserRouter的原因，路径无法在实时服务器中工作。

赞(0）回复(0）举报 2023-05-18

我来回答

webpack React Router路由器无法从URL工作

4条答案

相关问题

热门标签

最新问答