Question

我的应用程序有以下路径：

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/并运行该路由。从那里我可以点击链接并带我到其他路线。但是，如果我试图通过网址到达那里，它会给我一个＆＃34;无法获取/路由＆＃34;错误。

当我尝试在这些路线上进行表单提交时，这是一个问题，因为重定向到它自己不再有效。

我正在使用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来部署我的反应应用程序和webpack来构建和捆绑我的scss和jsx等。

感谢您的帮助！

Answer 1

对于开发环境，您需要设置webpack-dev-server来处理您的路由以做出反应，并将其安装到您的依赖项中。

然后在package.json scripts部分，启动脚本应如下所示：

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

然后在webpack配置对象的root中设置devServer：

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

对于制作，您需要编写自己的ssr或使用任何ssr库，例如next.js

Answer 2

在这样的应用程序（仅限前端）中，问题是浏览器无法处理/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)

Answer 3

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

devServer: {
  historyApiFallback: true
}

在React应用程序中，通常会将<Route />包装在<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>
)}
}

React Router路由无法通过URL

3 个答案: