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，它显示相同的App.js组件，而不是hello.js。

因为您使用的是http://localhost:8080/而不是HashRouter（较旧的版本，＃无法正常工作）。浏览器仅读取URL的第一部分#。使用以下内容路由到页面的某个部分时，<a href="#projects">Goto projects</a>与此类似。
<div id="projects"></div>

以上内容使用户保持在同一页面上，但滚动到http://localhost:8080/hello部分

不要使用它，如果您使用的是React Router V4，那不是您想要的。

http://localhost:8080/hello显示无法获得http://localhost:8080/hello

您可能没有运行支持前端路由的开发服务器。如果您不这样做，则基本上是通过按Enter来告诉SERVER为您服务的页面http://localhost:8080。您不希望这样，服务器在这里应该是被动的，除了主要index.html之外，不能为您提供任何其他页面。因此，相反，您希望服务器给您Hello，并这样做，它将加载您的主要index.html和脚本，然后react接管，react-router检查url，然后呈现给您/ hello webpack-dev-server组件进行路由。

要实现此目的，请确保已安装npm install webpack-dev-server --save-dev。您可以通过在命令行中键入以下内容来执行此操作。 devServer: { publicPath: '/', historyApiFallback: true } // add the below line to the scripts section "start:dev": "webpack-dev-server"

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

npm run start:dev

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

然后在您的终端中运行http://localhost:8080/hello以启动开发服务器。

我希望所有这些都是有道理的，并且有了这些指导方针，您就能使代码正常工作。如果没有让我知道;）

注意： Alex也有一个不错的观点。 React Router v4渲染所有匹配的路由。因此，如果路径为/ /hallo和exact都将匹配并呈现。如果只想渲染一个，请使用Alex提到的<Switch>，或将路线包装在<Switch> <Route path="/" component={App}/> <Route path="/hello" component={Hello}/> </Switch>组件中。

react-router-dom

react-router docs就是这样。

渲染第一个孩子或匹配位置的孩子

更新：
OP上载有问题的存储库后，已更正以下内容，以使路由正常运行。如果有人感兴趣，请the fixed project is on GitHub。

使项目正常运行的要点：

使用react-router代替app.get("/*", (req, res) => res.sendFile(__dirname + '/public/index.html'));
Tell Express将所有传入流量路由到index.html <Switch>
使用<Route>和$allowed_ids组件按照问题中的说明设置路由。 See code here。

Answer 2

尝试使用exact指令：

<Route exact path="/" component={App} />

请参阅API文档：https://reacttraining.com/react-router/web/api/Route/exact-bool

为什么React-Router无法显示正确的组件？

2 个答案: