Question

这是我的主要应用文件：

import React from 'react';
import { render } from 'react-dom';
import { browserHistory, Router, Route, IndexRoute } from 'react-router';

// Components
import Main from './components/core/Main.component';
import NotFound from './components/core/NotFound.component';
import About from './components/About.component';
import TeaTimer from './components/TeaTimer.component';

// App css
require('style!css!sass!applicationStyles');

render(
    (<div>
      <Router history={browserHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={TeaTimer} />
          <Route component={About} path="/about"/>
        </Route>
        <Route component={NotFound} path="*"/>
      </Router>
    </div>),
    document.querySelector('#app')
);

这是我的主要内容：

import React, { Component } from 'react';

class Main extends Component {
  render() {
    return (
        <div>
            {this.props.children}
        </div>
    )
  }
}

Main.propTypes = {
  children: React.PropTypes.object
}

export default Main;

这是我的快速服务器设置：

var express = require('express');

// Create our app
var app = express();
const PORT = process.env.PORT || 3000;

app.use(function (req, res, next){
  if (req.headers['x-forwarded-proto'] === 'https') {
    res.redirect('http://' + req.hostname + req.url);
  } else {
    next();
  }
});

app.use(express.static('public'));

app.listen(PORT, function () {
  console.log('Express server is up on port ' + PORT);
});

现在，当我打开浏览器并转到http://localhost:3000时，我获得了TeaTimer组件。 http://localhost:3000/#/相同，http://localhost:3000/#/about相同，未定义路线相同 - http://localhost:3000/#/sdnaipwnda[j。

但是当我去http://localhost:3000/about时，我得到了：

无法获取/关于

我做错了什么？

如果您需要更多信息，请询问我是否会将其添加到问题中，或结帐{{3}}。

Answer 1

好的，这个很简单。您只是使用了错误的历史记录。如果您希望使用基于哈希的路由，即hashHistory等路由，则需要/#/about。

import {Router, hashHistory} from 'react-router' ... <Router history={hashHistory}> ...

如果您不想要基于哈希的历史记录，但又想要像/about这样的常规网址，那么您需要browserHistory。但是，在这种情况下，您必须确保您的Web服务器为所有类似路由的URL提供相同的index.html。这在react-router＆＃39; documentation。您需要在快速服务器的路由配置结束时添加类似的内容：

// handle every other route with index.html, which will contain // a script tag to your application's JavaScript file(s). app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html')) }) 上面的代码假定您的index.html文件位于public/，因此您可能需要将参数更改为path.resolve。

我实际上更喜欢仅为没有扩展名的网址返回index.html。这样，只要缺少请求的资源，就会阻止index.html作为.png或.js提供，而是获得有意义的404.

app.get('*', function (request, response){ if (request.path.match(/\/[^\/.]*$/)) { response.sendFile(path.resolve(__dirname, 'public', 'index.html')) } })

Answer 2

从路径中删除/

<Route component={About} path="about"/>

删除

Main.propTypes = {
  children: React.PropTypes.object
}

无论如何，儿童默认传递为道具

Answer 3

无需/在路径内。

渲染（（） document.querySelector（＆＃39;＃应用程序＆＃39;））;

React Router始终显示IndexRoute

3 个答案: