React Router v6 – createBrowserRouter 无法获取错误

huangapple
go评论104阅读模式
英文:

React Router v6 - createBrowserRouter Can not get error

问题

我尝试使用createBrowserRouter来创建一个新的路由（除了根路径"/"之外），但似乎没有起作用。是否有人可以帮忙指出可能缺少什么？

以下是index.js的代码示例：

  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import App from './app';
  4. import { createBrowserRouter, RouterProvider } from 'react-router-dom';
  6. const router = createBrowserRouter([
  7.   {
  8.     path: "/", // 这个可以正常工作
  9.     element: <App />,
  10.   },
  11.   {
  12.     path: "/hello", // 这里会报错 "Cannot GET /hello"
  13.     element: <div>Hello</div>
  14.   }
  15. ])
  17. ReactDOM.createRoot(document.getElementById('root'))
  18.   .render(
  19.     <React.StrictMode>
  20.       <App />
  21.     </React.StrictMode>
  22.   )

Webpack通用配置（webpack common config）：

  1. const path = require('path');
  3. const babelLoaderRule = {
  4.   test: /\.(js|jsx)$/,
  5.   exclude: /(node_modules|bower_components)/,
  6.   use: {
  7.     loader: 'babel-loader',
  8.     options: {
  9.       presets: ['@babel/preset-env', '@babel/preset-react'],
  10.       plugins: [
  11.         '@babel/plugin-transform-runtime',
  12.         '@babel/plugin-proposal-class-properties',
  13.       ]
  14.     }
  15.   }
  16. }
  18. const urlLoaderRule =  {
  19.   test: /\.(png|jpe?g|gif)$/i,
  20.   loader: 'url-loader',
  21.   options: {
  22.     name: '[name].[ext]',
  23.     outputPath: 'images',
  24.     limit: 8192,
  25.   }
  26. }
  28. module.exports = {
  29.   entry: {
  30.     app: './src/index.js',
  31.   },
  32.   output: {
  33.     filename: 'js/[name]-bundle-[chunkhash:6].js',
  34.     path: path.resolve(__dirname, '../dist'),
  35.   },
  36.   module: {
  37.     rules: [babelLoaderRule, urlLoaderRule]
  38.   }
  39. };

Webpack开发配置（webpack dev config）：

  1. const path = require('path');
  2. const { merge } = require('webpack-merge');
  3. const common = require('./webpack.common.config.js');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const webpack = require('webpack');
  7. module.exports = merge(common, {
  8.   mode: 'development',
  9.   devtool: 'eval-cheap-module-source-map',
  10.   devServer: {
  11.     static: path.join(__dirname, '../dist'),
  12.     port: 3000,
  13.     compress: true,
  14.   },
  15.   plugins: [
  16.     new HtmlWebpackPlugin({
  17.       template: 'public/index.html',
  18.       inject: 'body',
  19.       hash: false,
  20.     }),
  21.     new webpack.DefinePlugin({
  22.       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  23.     }),
  24.   ],
  25.   module: {
  26.     rules: [{        
  27.         test: /\.css$/,
  28.         use: [
  29.             'style-loader',
  30.             'css-loader',
  31.             'postcss-loader',
  32.         ]
  33.     }]
  34.   }
  35. });

启动应用程序的命令：

  1. "start": "webpack serve --open --config ./config/webpack.dev.config.js",
英文:

I tried to use createBrowserRouter to create a new route (apart from the root &quot;/&quot;), but it seems not working. Can anyone help pointing out what could be missing?

React Router v6 – createBrowserRouter 无法获取错误

Here is how index.js looks like:

  1. import React from &#39;react&#39;;
  2. import ReactDOM from &#39;react-dom/client&#39;;
  3. import App from &#39;./app&#39;;
  4. import { createBrowserRouter, RouterProvider } from &#39;react-router-dom&#39;;
  6. const router = createBrowserRouter([
  7.   {
  8.     path: &quot;/&quot;, // This is working
  9.     element: &lt;App /&gt;,
  10.   },
  11.   {
  12.     path: &quot;/hello&quot;, // This get &quot;Cannot GET /hello&quot; error 
  13.     element: &lt;div&gt;Hello&lt;/div&gt;
  14.   }
  15. ])
  17. ReactDOM.createRoot(document.getElementById(&#39;root&#39;))
  18.   .render(
  19.     &lt;React.StrictMode&gt;
  20.       &lt;App /&gt;
  21.     &lt;/React.StrictMode&gt;
  22.   )

webpack common config:

  1. const path = require(&#39;path&#39;);
  3. const babelLoaderRule = {
  4.   test: /\.(js|jsx)$/,
  5.   exclude: /(node_modules|bower_components)/,
  6.   use: {
  7.     loader: &#39;babel-loader&#39;,
  8.     options: {
  9.       presets: [&#39;@babel/preset-env&#39;, &#39;@babel/preset-react&#39;],
  10.       plugins: [
  11.         &#39;@babel/plugin-transform-runtime&#39;,
  12.         &#39;@babel/plugin-proposal-class-properties&#39;,
  13.       ]
  14.     }
  15.   }
  16. }
  18. const urlLoaderRule =  {
  19.   test: /\.(png|jpe?g|gif)$/i,
  20.   loader: &#39;url-loader&#39;,
  21.   options: {
  22.     name: &#39;[name].[ext]&#39;,
  23.     outputPath: &#39;images&#39;,
  24.     limit: 8192,
  25.   }
  26. }
  28. module.exports = {
  29.   entry: {
  30.     app: &#39;./src/index.js&#39;,
  31.   },
  32.   output: {
  33.     filename: &#39;js/[name]-bundle-[chunkhash:6].js&#39;,
  34.     path: path.resolve(__dirname, &#39;../dist&#39;),
  35.   },
  36.   module: {
  37.     rules: [babelLoaderRule, urlLoaderRule]
  38.   }
  39. };

webpack dev config:

  1. const path = require(&#39;path&#39;);
  2. const { merge } = require(&#39;webpack-merge&#39;);
  3. const common = require(&#39;./webpack.common.config.js&#39;);
  4. const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
  5. const webpack = require(&#39;webpack&#39;);
  7. module.exports = merge(common, {
  8.   mode: &#39;development&#39;,
  9.   devtool: &#39;eval-cheap-module-source-map&#39;,
  10.   devServer: {
  11.     static: path.join(__dirname, &#39;../dist&#39;),
  12.     port: 3000,
  13.     compress: true,
  14.   },
  15.   plugins: [
  16.     new HtmlWebpackPlugin({
  17.       template: &#39;public/index.html&#39;,
  18.       inject: &#39;body&#39;,
  19.       hash: false,
  20.     }),
  21.     new webpack.DefinePlugin({
  22.       &#39;process.env.NODE_ENV&#39;: JSON.stringify(process.env.NODE_ENV || &#39;development&#39;)
  23.     }),
  24.   ],
  25.   module: {
  26.     rules: [{        
  27.         test: /\.css$/,
  28.         use: [
  29.             &#39;style-loader&#39;,
  30.             &#39;css-loader&#39;,
  31.             &#39;postcss-loader&#39;,
  32.         ]
  33.     }]
  34.   }
  35. });

serve the app by:

  1. &quot;start&quot;: &quot;webpack serve --open --config ./config/webpack.dev.config.js&quot;,

答案1

得分: 2

以下是翻译的内容：

原文:
It appears you are missing actually rendering the router (and routes). Right now the app is only rendering the App component.

翻译:
看起来您实际上没有渲染路由器（以及路由）。目前应用程序仅渲染App组件。

原文:
Should be

翻译:
应该是

原文:
The dev webpack configuration should also specify historyApiFallback: true in the devServer property.

翻译:
开发阶段的Webpack配置还应在devServer属性中指定historyApiFallback: true。

英文:

It appears you are missing actually rendering the router (and routes). Right now the app is only rendering the App component.

  1. &lt;React.StrictMode&gt;
  2.   &lt;App /&gt;
  3. &lt;/React.StrictMode&gt;

Should be

  1. import React from &#39;react&#39;;
  2. import ReactDOM from &#39;react-dom/client&#39;;
  3. import App from &#39;./app&#39;;
  4. import { createBrowserRouter, RouterProvider } from &#39;react-router-dom&#39;;
  6. const router = createBrowserRouter([
  7.   {
  8.     path: &quot;/&quot;,
  9.     element: &lt;App /&gt;,
  10.   },
  11.   {
  12.     path: &quot;/hello&quot;,
  13.     element: &lt;div&gt;Hello&lt;/div&gt;
  14.   }
  15. ]);
  17. ReactDOM.createRoot(document.getElementById(&#39;root&#39;))
  18.   .render(
  19.     &lt;React.StrictMode&gt;
  20.       &lt;RouterProvider router={router} /&gt;
  21.     &lt;/React.StrictMode&gt;
  22.   );

The dev webpack configuration should also specify historyApiFallback: true in the devServer property.

  1. const path = require(&#39;path&#39;);
  2. const { merge } = require(&#39;webpack-merge&#39;);
  3. const common = require(&#39;./webpack.common.config.js&#39;);
  4. const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
  5. const webpack = require(&#39;webpack&#39;);
  7. module.exports = merge(common, {
  8.   mode: &#39;development&#39;,
  9.   devtool: &#39;eval-cheap-module-source-map&#39;,
  10.   devServer: {
  11.     historyApiFallback: true, // &lt;--
  12.     static: path.join(__dirname, &#39;../dist&#39;),
  13.     port: 3000,
  14.     compress: true,
  15.   },
  16.   plugins: [
  17.     new HtmlWebpackPlugin({
  18.       template: &#39;public/index.html&#39;,
  19.       inject: &#39;body&#39;,
  20.       hash: false,
  21.     }),
  22.     new webpack.DefinePlugin({
  23.       &#39;process.env.NODE_ENV&#39;: JSON.stringify(process.env.NODE_ENV || &#39;development&#39;)
  24.     }),
  25.   ],
  26.   module: {
  27.     rules: [{        
  28.         test: /\.css$/,
  29.         use: [
  30.             &#39;style-loader&#39;,
  31.             &#39;css-loader&#39;,
  32.             &#39;postcss-loader&#39;,
  33.         ]
  34.     }]
  35.   }
  36. });

答案2

得分: 0

尝试运行此代码，查看是否解决了问题。

  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import App from './app';
  4. import { createBrowserRouter, Switch, Route } from 'react-router-dom';
  6. const router = createBrowserRouter({
  7.   routes: [
  8.     {
  9.       path: '/',
  10.       element: <App />,
  11.     },
  12.     {
  13.       path: '/hello',
  14.       element: <div>Hello</div>,
  15.     },
  16.   ],
  17. });
  19. ReactDOM.createRoot(document.getElementById('root')).render(
  20.   <React.StrictMode>
  21.     <Switch>{router}</Switch>
  22.   </React.StrictMode>
  23. );
英文:

Try this code to see whether it is resolved.

  1. import React from &#39;react&#39;;
  2. import ReactDOM from &#39;react-dom/client&#39;;
  3. import App from &#39;./app&#39;;
  4. import { createBrowserRouter, Switch, Route } from &#39;react-router-dom&#39;;
  5. const router = createBrowserRouter({
  6. routes: [
  7. {
  8. path: &#39;/&#39;,
  9. element: &lt;App /&gt;,
  10. },
  11. {
  12. path: &#39;/hello&#39;,
  13. element: &lt;div&gt;Hello&lt;/div&gt;,
  14. },
  15. ],
  16. });
  17. ReactDOM.createRoot(document.getElementById(&#39;root&#39;)).render(
  18. &lt;React.StrictMode&gt;
  19. &lt;Switch&gt;{router}&lt;/Switch&gt;
  20. &lt;/React.StrictMode&gt;
  21. );

huangapple
  • 本文由 发表于 2023年3月4日 05:44:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/75632134.html
  • javascript
  • react-router
  • react-router-dom
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定