反应路由器总是显示 IndexRoute

Posted 2023-02-22

【中文标题】反应路由器总是显示 IndexRoute

【英文标题】：React Router always displaying IndexRoute

【发布时间】：2017-05-18 18:06:22

【问题描述】：

这是我的主要应用文件：

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 时，我得到：

无法获取/关于

我做错了什么？

如果您需要更多信息，请询问，我会将其添加到问题中，或查看此git repo。

【问题讨论】：

你需要这个***.com/a/30720330/4355342

【参考方案1】：

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

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

如果您不想要基于散列的历史记录，而是想要看起来很普通的 URL，例如 /about 等，那么您确实需要 browserHistory。但是，在这种情况下，您必须确保您的 Web 服务器为所有类似路由的 URL 提供相同的 index.html。这在react-router'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。

我实际上更喜欢只为没有扩展名的 URL 返回 index.html。这样，当请求的资源丢失时，您就可以防止 index.html 被用作 .png 或 .js，而是获得有意义的 404。

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

【参考方案2】：

关于路径不需要有 /。

渲染（ ( ), document.querySelector('#app') );

【参考方案3】：

从路径中删除/

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

删除

Main.propTypes = 
  children: React.PropTypes.object

不管怎样，默认情况下，孩子是作为道具传递的

【讨论】：

另一个可能来自 proptypes，如果不是，我很抱歉无法提供帮助

不，这也不能解决问题。这很奇怪，因为我根本没有收到任何错误...感谢您的尝试:)

我对 Express 不太熟悉，但我认为这可能会有所帮助 github.com/Remchi/reddice/blob/master/server/index.js