javascript - 为什么 react-router 不显示正确的组件？

Question

当我在浏览器中输入 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>
  );
 }
}

Answer 1

这里发生了一些事情，让我试着解释一下出了什么问题以及如何解决这些问题。

http://localhost:8080/#/hello it displays the same App.js component instead of hello.js.

因为您正在使用 BrowserRouter而不是 HashRouter(旧版本，# 不工作)。浏览器只读取 URL 的第一部分，即 http://localhost:8080/。 . #当您使用以下内容路由到页面的某个部分时，情况类似。
<a href="#projects">Goto projects</a>

上面的代码让用户保持在同一页面，但滚动到 <div id="projects"></div> 部分

不要使用它，如果你使用的是 React Router V4，那不是你要找的。

http://localhost:8080/hello displays cannot get http://localhost:8080/hello

您可能没有运行支持前端路由的开发服务器。如果你不这样做，基本上发生的事情是按回车键告诉服务器为你提供页面，http://localhost:8080/hello .你不想要这个，服务器在这里应该是被动的，而不是你的主 index.html 之外的任何其他页面。因此，相反，您希望服务器为您提供 http://localhost:8080通过这样做，它会加载你的主要 index.html 和脚本，然后 react 接管， react 路由器检查 url，然后用 Hello 向你呈现/hello 路由。成分。

为了实现这一点，请确保您拥有 webpack-dev-server安装。您可以通过在命令行中键入以下内容来执行此操作。 npm install webpack-dev-server --save-dev

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

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

这基本上告诉开发服务器将所有请求重新路由到 index.html，因此 react-router 负责路由。 Here's more on Webpack-dev-server .

然后在你的终端运行 npm run start:dev启动开发服务器。

我希望这一切都有意义，并且通过这些指南，您能够让您的代码正常工作。如果不让我知道 ;)

注意: Alex 也有一个很好的观点。 React Router v4 渲染所有匹配的路由。所以，如果路径是 http://localhost:8080/hello /和 /hallo两者都匹配并将呈现。如果只想渲染一个，请使用 exact正如亚历克斯提到的那样，或者将您的路线包装在 <Switch> 中组件。

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

这是 react-router docs 的内容说。

Renders the first child or that matches the location

更新:
在 OP 上传了一个有问题的 repo 之后，更正了以下内容以使路由正常工作。有兴趣者the fixed project is on GitHub .

使项目成功的要点:

• 使用react-router-dom而不是 react-router
• 告诉 Express 将所有传入流量路由到 index.html app.get("/*", (req, res) => res.sendFile(__dirname + '/public/index.html'));
• 使用<Switch>和 <Route>组件来设置问题中描述的路线。 See code here .