Question

我有这个简单的代码不起作用。我从react-router项目页面中取出它并略微修改它看起来好一点。

设置

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

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>);
    }
});

我也设置了反应路由器：

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）来避免网址中的哈希值。

我的服务器是在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，因为它总是会提供这个。

Answer 2

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

您可以尝试此操作（Link来自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}。）

Answer 3

我能够通过将[[0]*(2*width + 1)]*(2*height + 1)]添加到我的 webpack-dev-server 命令来解决直接链接到网址的问题。

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

react-router 2.0不路由

3 个答案: