Question

我从react-router复制了快速入门示例，我在AppRoutes.js中公开了基本组件：

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)
export default class AppRoutes extends React.Component
{
    render ()
    {
        return (
          <Router>
            <div>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/topics">Topics</Link></li>
            </ul>
            <hr/>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/topics" component={Topics}/>
            </div>
        </Router>);
    };
};

我从appClient.js提供服务，如：

import React from 'react';
import ReactDOM from 'react-dom';
import AppRoutes from './components/AppRoutes';

window.onload = () => 
{
    ReactDOM.render(<AppRoutes />, document.getElementById('app'));
}

来自index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="js/bundle.js" type="text/javascript"></script>
  </body>
</html>

我可以浏览链接并且它工作正常，但每当我尝试通过键入url直接进入二级路由 - 即http://localhost:3000/topics/rendering或者如果我重新加载页面我得到错误：< / p>

bundle.js:1 Uncaught SyntaxError: Unexpected token <

这是我的webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public/js');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: path.resolve(APP_DIR, 'appClient.js'),
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
      loaders: [
          {
              test: /\.js?/,
              include: APP_DIR,
              loader: 'babel-loader'
          }
      ]
  }
};

module.exports = config;

在node我的路由器看起来像这样：

var path = require('path');

module.exports = function(app)
{
    app.get('*', function (req, res) {
        res.sendFile(path.join(App.paths.CLIENT, '/index.html'));
    });
}

我认为二级路线中的match部分有些可疑，但无法弄清楚是什么。

你能帮我弄清楚出了什么问题吗？

React-router 4在页面重新加载时中断

0 个答案: