Javascript 为什么react路由器不显示正确的组件？

当我在浏览器中输入

localhost:8080

时，它会显示App.js组件。但是当我导航到

localhost:8080/#/hello

时，它会显示相同的App.js组件，而不是hello.js。localhost:8080/hello显示“无法获取localhost:8080/hello”。我的代码有什么问题？我正在我的应用程序中使用webpack和babel

//index.js

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store} from './public/store/store';
import App from './public/Components/App';
import Hello from './public/Components/hello';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';

//import './index.css'


render(
 <Provider store={store}>
  <Router>
   <div>
    <Route path="/" component={App}/>
    <Route path="/hello" component={Hello}/>
   </div>
  </Router>
 </Provider>,
 document.getElementById('root')
)


//App.js
import React from 'react';

export default class App extends React.Component {
 render() {
  return (
      <div>
          <h1>React Js.</h1>
      </div>
  );
 }
}


//hello.js

import React from 'react';

export default class Hello extends React.Component {
 render() {
  return (
      <div>
          <h1>Hello</h1>
      </div>
  );
 }
}

//index.js
从“React”导入React；
导入ReactDOM，{render}来自“ReactDOM”；
从'react redux'导入{Provider}；
从“./public/store/store”导入{store}；
从“./public/Components/App”导入应用程序；
从“./public/Components/Hello”导入Hello；
进口{
BrowserRouter作为路由器，
路线
}从“反应路由器dom”；
//导入“./index.css”
渲染(
,
document.getElementById（'root'））
)
//App.js
从“React”导入React；
导出默认类App扩展React.Component{
render（）{
返回(
反应Js。
);
}
}
//你好
从“React”导入React；
导出默认类Hello.Component{
render（）{
返回(
你好
);
}
}

尝试使用

精确的

指令：

---

请参阅API文档：

这里发生了一些事情，让我试着解释一下哪里出了问题，以及如何修复它们

它显示相同的App.js组件，而不是hello.js

因为您使用的是

BrowserRouter

而不是HashRouter（旧版本，#不工作）。浏览器只读取URL的第一部分，即

http://localhost:8080/

。当您使用以下命令路由到页面的某个部分时，

#

类似。

以上内容将用户保持在同一页面上，但会滚动到

不要使用这个，如果您使用的是React Router V4，它不是您想要的

显示无法获取

您可能没有运行支持前端路由的dev服务器。如果您不这样做，基本上就是通过按enter键告诉服务器为您服务页面，

http://localhost:8080/hello

。如果您不希望这样做，那么服务器应该是被动的，并且不会为您提供任何其他页面，而不是main index.html。因此，您希望服务器为您提供

http://localhost:8080

这样做，它会加载主index.html和脚本，然后react接管，react路由器检查url，然后使用

hello

组件呈现/hello路由

为了实现这一点，请确保已安装

webpack dev server

。您可以通过在命令行中键入以下命令来完成此操作。

npm安装网页包开发服务器--保存开发

然后将以下内容添加到package.json

devServer: {
  publicPath: '/',
  historyApiFallback: true
}
// add the below line to the scripts section
  "start:dev": "webpack-dev-server"

这基本上告诉dev服务器将所有请求重新路由到index.html，因此react router负责路由

然后在终端run

npm中运行start:dev

来启动开发服务器

我希望这一切都是有意义的，有了这些指导原则，您就能够使代码正常工作。如果不让我知道；）

注意：亚历克斯也有一个很好的观点。React Router v4渲染所有匹配的路由。因此，如果路径是

http://localhost:8080/hello

/

和

/hallo

都匹配并将呈现。如果您只想渲染一个，请使用Alex提到的

exact

，或者将路线包装在

组件中

<Switch>
  <Route path="/" component={App}/>
  <Route path="/hello" component={Hello}/>
</Switch>

这是他们说的

渲染与该位置匹配的第一个子对象

更新：
OP上传了一份带有问题的回购协议后，以下内容得到了纠正，以使路由正常工作。如果有人感兴趣

项目工作要点：

• 使用

  react router dom

  代替

  react router

• 告诉Express将所有传入流量路由到index.html

  app.get（“/*”，（req，res）=>res.sendFile（uu dirname+'/public/index.html'）

• 使用
  和
  组件设置问题中描述的路线

  ---

您能否编辑您的帖子以澄清“localhost:8080/hello显示无法获取localhost:8080/hello”？完全不清楚。维卡斯，我真的很难弄清楚什么不起作用，为什么不起作用。您能否将package.json包含在问题中。如果你能将回购协议放在GitHub上，我就可以查看完整的设置，那就更好了。谢谢嗨，谢弗这是github链接告诉我github代码哪里错了。哇，你的设置与你问题中的细节完全不同。您使用NodeJS和Express提供文件，难怪一切都不起作用。我对您的服务器做了一些调整，在前端包括三条路由。在GitHub上，带有我的更改的回购位于。让我知道这是否回答了你的问题。嗨，谢弗，为了解决我的问题，现在它正在工作。很抱歉给你不同的回购代码，因为我忘了更新。没问题，这可能会发生，对我来说，这是一个很好的挑战。我以前从未见过像这样的Webpack/NodeJS设置，所以在修复它时我自己学到了一些新东西。我将用我调整过的主要内容更新我的答案。你介意将我的答案标记为已接受吗？这将帮助其他人看到我们得出了结论。谢谢！