Question

在我的webpack中，应用程序的入口点设置为index.js：

entry: {  
    app: [
      'react-hot-loader/patch',
      './client/index.js'
    ]

在节点Js中，对于我的应用程序中的路径/，我将其路由到index.html 来自服务器端的routes.js使用：

 app.route('/*')
    .get((req, res) => {
     res.sendFile(path.resolve(`${app.get('appPath')}/index.html`));
    });

以上代码可以理解为index.html服务。

但是如果我希望使用React-router初始化我的应用程序路由怎么办？

index.html被渲染但我没有看到index.js被初始化。它被定义为webpack中的入口点，所以应该发生，对吗？

问题：要初始化React-routing，一旦流程到达index.js

，该工作应该有效

客户端文件夹中的routes.js如下所示：

import React from 'react';
import {Route, IndexRoute} from 'react-router';
import About from './components/About/About';
import Header from './components/Header/Header';
import Outlet from './components/Home/SelectOutlet';

console.log("routes file client")

    export default (
      <Route path="/" component={Header}>
        <IndexRoute component={Outlet}/>
        <Route path="about" component={Footer}/>
      </Route>
    );

和index.js

import 'babel-polyfill';  //certain functions like array.from , set, map can't be transpiled by babel so ue poyfill for that
import React from 'react';
import {  render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import  routes  from './routes';
//import '../node_modules/bootstrap/dist/css/bootstrap.min.css';  //webpack can import CSS files too
import './styles/styles.css';

render((
  <Router history={browserHistory} routes={routes}/>),
  document.getElementById('app')
);

console.log("In index js render ")

index.js和routes.js中的控制台永远不会得到安慰，因为快速路由，应用程序只提供index.html

我的网络包文件来自此处：https://github.com/Hashnode/mern-starter

但是我没有看到使用npm start命令在任何地方创建bundle.js。

编辑：错误截图： 屏幕1： error message

当我点击此错误消息时：

我从js中的html获取了所有内容：

<!DOCTYPE html>
<html>
   <head>
        <title>
            ABC
        </title>
   </head>
   <body>
        <h1> XYZ</h1>
        <div id="app"></div>
        <script src="index.js"></script> 

   </body>
</html>

Answer 1

嗯......你是否包括

<script src="index.js"></script>

你的index.html中的

？...

来自快递的路由，但不是来自React js react-router

1 个答案: