react-router 2.0 不路由答案

【问题标题】：react-router 2.0 doesn't routereact-router 2.0 不路由
【发布时间】：2016-02-14 08:59:25
【问题描述】：

我有这个不起作用的简单代码。我从 react-router 项目页面中取出它并稍作修改以使其看起来更好一些。

设置

我有几个非常简单的 react 组件：

var IndexPage = React.createClass({
    render(){
        return (<h1>Index Page</h1>);
    }
});
var AboutPage = React.createClass({
    render(){
        return (<h1>About page</h1>);
    }
});
var NotFoundPage = React.createClass({
    render(){
        return (<h1>Not found page</h1>);
    }
});

我还设置了 react 路由器：

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var BrowserHistory = ReactRouter.browserHistory;
var Render = ReactDOM.render;

这就是我使用 react router 2.0 的方式。

Render((
  <Router history={BrowserHistory}>
    <Route path="/" component={IndexPage}>
      <Route path="about" component={AboutPage}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>
  </Router>
), document.body)

我使用 BrowserHistory（不是 HashHistory）来避免 url 中的哈希。

我的服务器在 8080 端口上的 IIS 10 (Windows 10) 下启动。

问题

http://localhost:8080/

转到 IndexPage 组件。这是正确的。

http://localhost:8080/about

转到 IIS 404 错误页面。在这种情况下路由不起作用

http://localhost:8080/ttt

再次进入 IIS 404 错误页面。

所以路由器看不到 / 之后的嵌套路径。它甚至不关心它们是否正确。

什么会导致这种奇怪的行为？

提前致谢！

更新

我发现下一个字符串解决了客户端路由的问题：

{this.props.children}

这是固定代码：

var IndexPage = React.createClass({
    render(){

        console.log('index page render');

        return (<div>
                    <h1>Index Page</h1>
                    <Link to={ '/about' }>about</Link>
                    {this.props.children}
                </div>);
    }
});

【问题讨论】：

试试localhost:8080/#/about
localhost:8080/#about 指向 IndexPage
我提到我使用 BrowserHistory 而不是 HashHistory 禁用了哈希
我有相同的设置，服务器和使用 {this.props.children}，但我得到的是 IIS 404 而不是我的自定义 404。在 webpack-dev-server 上运行时有效。
我还没有使用后端，因为它目前不那么重要。我使用客户端路由。如果你愿意，我可以给你发一个完整的非常简单的例子。

标签： javascript reactjs react-router

【解决方案1】：

您的服务器是否配置为将所有应用程序路径映射到您的 index.html？如果您的服务器将所有路径映射到您的索引文件，那么您永远不应该得到 IIS 404，因为它总是会提供这个。

【讨论】：

我不认为它与IIS设置有关。因为我从该站点下载了 react-router 示例并且它们运行良好。现在我正在挖掘它们以解决我遇到的问题。
好吧，这是我唯一的猜测。通常来自 react-router 的所有示例都使用 node.js express 服务器运行，并激活了 url 重写。因此，它不打算在不设置服务器的情况下直接在 IIS 中运行。只是说;）
我不想冒犯或其他什么）谢谢！
我建议任何刚接触 reactjs 或 react-router 的人都可以学习这个笨蛋教程。非常清晰，用清晰的解释教你模块化编码。 egghead.io/lessons/…

【解决方案2】：

React-router 是一种客户端路由解决方案（也适用于服务器端，但您似乎使用 .Net 作为服务器端处理程序）。

你可以试试这个（Link from React-Router）：

    <Link to={ pathname: 'about' }>
      about
    </Link>

把它放在索引页面的组件中，然后点击链接，react-router就可以工作了。

更新：
{this.props.children} 引用内部组件（AboutPage，NotFoundPage）。如果您将代码更改为：

<Route path="/" component={IndexPage} /> <Route path="/about" component={AboutPage}/> <Route path="*" component={NotFoundPage}/> 它会起作用。（如果没有嵌套路由，请删除 IndexPage 中的{this.props.children}）。

【讨论】：

我试过你的方法。我不知道为什么，但你的代码不起作用。巴贝尔无法理解。我用下一个版本修复了它：<Link to={ 'about' }> about </Link>
此代码将 url 设置为：http://localhost:8080/about，但加载的是 IndexComponent 而不是 AboutComponent。奇怪。
我找到了解决办法！但我还是不明白为什么它解决了我的问题。
除了添加一个链接，我还应该在它之后添加下一个字符串：{this.props.children}。 Index 组件开始正常工作。为什么？

【解决方案3】：

通过将--history-api-fallback 添加到我的 webpack-dev-server 命令，我能够解决直接链接到 URL 的问题。

设置此标志会提示 webpack-dev-server 提供索引页面而不是 404。然后索引页面将在客户端正确路由。

【讨论】：