react-router Router.HistoryLocation 使用 <noscript> 离开目标，但没有完美工作

Posted 2023-02-22

【中文标题】react-router Router.HistoryLocation 使用 <noscript> 离开目标，但没有完美工作

【英文标题】：react-router Router.HistoryLocation leaves target with <noscript> but without works perfectly

【发布时间】：2015-06-11 08:42:07

【问题描述】：

我刚刚离开了 ReactJs 的起点并发现了 react-router。很棒的东西，但我看不到让以下代码与“Router.HistoryLocation”一起作为运行函数的第二个参数。

这一切都完美无缺，但在 url 中不使用 #。 This Q 让我将 Router.HistoryLocation 作为第二个参数，github docs 也是如此。但是，当我在浏览器中运行它时，结果是目标只填充了这个：

<noscript data-reactid=".0"></noscript>

这是在 jsbin 上运行的代码：http://jsbin.com/saxutulaxi/1/。如果您编辑代码并从最后一位中删除“Router.HistoryLocation”，则一切正常，但没有。 p>

这是我正在运行的简单脚本。 // 这直接来自 react-router 文档中的 overview.md 变种路由器=反应路由器； var DefaultRoute = Router.DefaultRoute; var Link = Router.Link; var Route = Router.Route; var RouteHandler = Router.RouteHandler;

var App = React.createClass(
    render: function () 
        return (
        <div>
            <header>
                <ul>
                    <li><Link to="inbox">Inbox</Link></li>
                    <li><Link to="calendar">Calendar</Link></li>
                </ul>
            </header>

            /* this is the important part */
            <RouteHandler/>
        </div>
        );
    
);

var Inbox = React.createClass(
    render: function () 
        return (
            <div>
                This is the inbox
            </div>
        );
    
);

var Calendar = React.createClass(
    render: function()
        return (
            <div>
                This is the calendar
            </div>
        );
    
);

var routes = (
    <Route name="app" path="/" handler=App>
        <Route name="inbox" handler=Inbox/>
        <Route name="calendar" handler=Calendar/>
        <DefaultRoute handler=Inbox/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) 
    React.render(
        <Handler/>,
        document.querySelector('#content')
    );
);

不知道除了在这里问还能做什么，因为我想我已经按照信中的指南...

谢谢， 约翰

【参考方案1】：

您的代码是正确的，但是由于该应用程序在 iframe 中运行，其中 url 不是 react-router 所期望的，因此它无法在 JSBin 上运行。在 JSBin 的情况下，iframe 报告 /runner 的 HistoryLocation。

<Route name="app" path="/runner" handler=App > 修复了您在 JSBin 上的问题。

【讨论】：

完美，非常感谢。我没有意识到你必须宣布这一点。为了让我的应用程序正常工作，我想在路径后使用反应路由器：....com/wish/。所以我不得不用斜杠设置路径：path="/wish/"

关键是 JSBin 虽然很棒，但并不总是准确地反映 lib 在真实页面上的作用。在这种情况下，这是因为您正在与 JSBin 本身共享地址栏。