在 url 浏览器字段中键入 sub-url 时不显示路由答案

【问题标题】：Routes do not show when typing sub-url in the url browser field在 url 浏览器字段中键入 sub-url 时不显示路由
【发布时间】：2017-12-23 18:01:07
【问题描述】：

我无法在我的 react 应用中导航到其他路线。当我在本地（npm run dev）启动我的应用程序时，我的主路线可见并且有效。

我在控制台中没有收到任何错误。

这是我的主路由器组件代码：

import React from 'react'
import { Switch, Route, Router } from 'react-router-dom'

import Layout from './components/Layout.js'
import Statistic from './components/statisticscomponent/Statistic.js'
import Starter from './components/starter/Starter.js'


export const Main = () => (
      <Switch>
        <Route exact path="/" component={Layout}/>
        <Route path="/abc" component={Statistic}/>
        <Route path="/edf" component={Starter}/>
      </Switch>
  )

这是启动应用程序的主要 script.js：

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Main/>
    </BrowserRouter>
  </Provider>, app);

如果您需要更多代码，请在评论部分发布。

【问题讨论】：

我没有发现任何问题。我们可以看看 Statistic 和 Starter 组件吗？如果您在挂载 Statistic/Starter 组件时 console.log 某些内容，然后浏览到 localhost:3000/abc，您会在控制台中看到日志吗？
我认为我的 webpack 中可能有一些东西。当导航到它时我在页面上收到此错误无法获取...显然必须设置我的 webpack
导航到哪个错误？
无法获取 /abc

标签： javascript node.js reactjs react-native react-router

【解决方案1】：

正如我所说，webpack.config.js 文件必须稍作修改才能使其正常工作。在你的 webpack.config.js 中写下这段代码：

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

扩展

我已经把代码放在里面了

module.exports = {...} 在我的输出代码块之后：

output: {
   path: __dirname + "/js",
   filename: "scripts.min.js",
 },

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

【讨论】：