javascript - React-router 2.0 不路由

Question

我有这个简单的代码，但不起作用。我从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>);
    }
});

Answer 1

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