После создания приложения реакции с помощью веб-пакета browserRouter не позволяет мне перейти непосредственно к маршруту, а hashRouter делает? - PullRequest
1 голос
/ 09 мая 2019

Моя проблема Когда я запускаю npm, запускаю dev, приложение загружается и все хорошо, я могу перейти к своему маршруту, определенному как и увидеть компонент.Однако, когда я запускаю npm, запускаю buildDev и загружаю приложение, он прекрасно загружает маршрут "/", но когда я вручную перехожу на "/ login", он говорит: "невозможно получить / login"

чтоработает , если бы я щелкнул по ссылке "логин", как при настройке моей "ссылки", он работает нормально, даже после сборки.Затем я зашел в свой index.js и изменил мой browserrouter на hashrouter, а затем снова запустил buildDev и npm start, и я смог перейти к маршруту входа в систему, если я сделал "/ # / login"

Что я делаю не так, что маршрутизатор браузера не работает?

Мой файл сценариев package.json также показан ниже:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "client": "webpack-dev-server --mode development",
  "server": "nodemon server-dev.js",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
  "buildDev": "rimraf build && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
  "buildProd": "rimraf build && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",
  "start": "node ./build/server.bundle.js"
},

Мой файл webpack.dev.config.js содержит следующее:

module.exports = {
  devtool: "cheap-module-source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js",
    publicPath: "/"
  },
  mode: "development",
  target: "web",
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
              camelCase: "dashes",
              localIdentName: "[name]_[local]_[hash:base64:5]"
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [
                autoprefixer({
                  browsers: [">1%", "last 2 versions"]
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "url-loader?limit=8000&name=images/[name].[ext]"
      }
    ]
  },
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      "/main": {
        target:"http://localhost:8080"
      }
    },
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html",
      filename: "index.html",
      inject: "body",
      excludeChunks: ["server"]
    })
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
};

Мой app.js выглядит следующим образом:

const AsyncPizza = React.lazy(() => import("./containers/Pizza"));

class App extends Component {
  render() {
    return (
      <div>
  <Link to="/login">login</Link>     
        <div>
          <Suspense fallback={<div>loading...</div>}>
            <Route path="/login" component={Authentication} />
            <Route path="/" exact component={LandingPage} />
            <Route path="/pizza" exact component={AsyncPizza} />
          </Suspense>
        </div>
      </div>
    );
  }
}

РЕДАКТИРОВАТЬ Мой server-dev.js выглядит следующим образом:

app.use(express.static("build"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
require("./routes")(app);


app.listen(8080, () => console.log("Listening on port 8080!"));

Мой webpack.server.config.js выглядит следующим образом:

module.exports = (env, argv) => {
  const SERVER_PATH =
    argv.mode === "production" ? "./server-prod.js" : "./server-dev.js";

  return {
    entry: {
      server: SERVER_PATH
    },
    output: {
      path: path.join(__dirname, "build"),
      filename: "[name].bundle.js",
      chunkFilename: "[name].bundle.js",
      publicPath: "/"
    },
    mode: argv.mode,
    target: "node",
    node: {
      // Need this when working with express, otherwise the build fails
      __dirname: false, // if you don't put this is, __dirname
      __filename: false // and __filename return blank or /
    },
    externals: [nodeExternals()], // Need this to avoid error when working with Express
    module: {
      rules: [
        {
          // Transpiles ES6-8 into ES5
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
  };
};

РЕДАКТИРОВАТЬ 2:

В моей папке маршрутов у меня есть файл index.js, который имеет следующее содержимое:

module.exports=function(app){
    app.use("/main",require("./main"))
}

Затем в «главной» папке у меня просто есть «тестовый» файл, который имеет следующий экспортируемый маршрут:

router.get(
  "/test",
  (req, res) =>

  res.send("hello")


);

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Как и в предыдущем случае, вам нужно добавить это после того, как ваш app.use направляет часть на ваш сервер-dev.js

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
})

это должно исправить

0 голосов
/ 09 мая 2019

Вы можете попробовать этот пример кода (если вы используете сервер для обслуживания только приложения реагирования):

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

Где вы можете заменить ссылку на файл index.html в соответствии с вашей файловой структурой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...