javascript - React-Router 疑问/问题

Question

我决定使用 React-Router 来管理使用 REACT JS 的 Meteor JS 应用程序的路由。

我已经让 React-Router “以某种方式”工作，但它有一些负面影响，我想在这里解释一下，希望找到解决方案。

首先，这是我的代码:

if (Meteor.isClient) {
    Meteor.startup(function () {
        console.log('startup');

        Hooks.init();

        const {Router, Route} = ReactRouter;

        const history = ReactRouter.history.useQueries(ReactRouter.history.createHistory)()

        React.render((
        <Router >
            <Route name="home" path="/" component={Sidebar}>
                <Route name="managedata" path="managedata" component={ManageData} />
            </Route>
        </Router>
        ), document.getElementById("render-target"));

    });
}

为了在这两条路线之间导航，我使用了 React-Router 提供的 Link 组件:

<ReactRouter.Link className="item" to="/">
    <i className="home icon"></i>
    EXAMPLE
</ReactRouter.Link>

<ReactRouter.Link className="item" to="managedata">
    <i className="block layout icon"></i>
    Manage Data
</ReactRouter.Link>

这就是问题所在: 1.) 加载以“/”作为路径的主页后，我收到显示 URL 的随机字符。这很丑陋，尤其是因为人们只期望“/”，或者除了域名或本地主机之外，url 中什么都没有显示...... 例如http://localhost:3000/#/?_k=q2c52z

2.) 当我点击“managedata”的Link 时，我还在 URL 中收到一些随机字符 例如http://localhost:3000/#/managementata?_k=6clzfn

这是我的问题:

1.) 是什么导致这些丑陋的字符出现在 URL 中以及如何删除它们？

2.) Link 仅使用路径值吗？正如您在上面看到的，我的主页的名称为“home”，但路径为“/”，我注意到，如果我将 Link 更改为 Link to="home"，那么我会被定向指向路径上带有“home”的 URL，这似乎不正确。

3.) 我最终使用上面的“组件”作为 Route 中的 props 之一。我注意到互联网上的许多示例都使用“处理程序”。但是，当我在代码中使用“处理程序”时......它不起作用...... 它们有何不同？

4.) 我已经按照上面的方式定义了我的路线，但是当我使用该页面时，最初不会呈现，但是如果我单击浏览器上的后退按钮，然后单击前进按钮，它就会呈现。我该如何解决这个问题？

Answer 1

几个小时前我遇到了上述问题。 现在我已经找到了解决方案，我想将其发布在这里，希望为以后遇到同样问题的读者节省一些时间。

以下是问答:

1.) 是什么导致这些丑陋的字符出现在 URL 中以及如何删除它们？

根据https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

“如果您没有指定历史记录类型(如上例所示)，那么在更新到 1.0.0 后您会注意到一些异常行为。使用基于默认哈希的路由，未由您自己定义的查询字符串条目将开始出现在您的网址名为“_k”。其外观示例如下:?_k=umhx1s。“

因此将“历史记录”添加到路由器中。 例如

const {路由器、路由、IndexRoute} = ReactRouter;

    const history = ReactRouter.history.useQueries(ReactRouter.history.createHistory)()

    React.render((
    <Router history={history}>
        <Route path="/" component={Sidebar}>
            <IndexRoute component={Dashboard} />
            <Route path="managedata" component={ManageData} />

        </Route>
    </Router>
    ), document.body);

注意路由器内的history={history}。

2.) Link 是否仅使用路径值？正如您在上面看到的，我的主页的名称为“home”，但路径为“/”，我注意到，如果我将链接更改为 Link to="home"，那么我会被定向到带有“home”的 URL “在似乎不正确的路径上。

阅读并尝试后...... “to”的值应该是路径。 它不仅应该是路径，还应该是由 {} 包围的路径。 例如，对于上面定义的路由，链接应如下使用:

<Link to={"/"} className="item" >               
<i className="home icon"></i>
EXAMPLE
</Link>

<Link to={"/managedata"} className="item"  >
    <i className="block layout icon"></i>
        Manage Data
</Link>

周围的 {} 对我来说产生了重要的影响。 否则页面最初不会呈现......我必须在浏览器上再次单击后退和前进才能呈现页面。

3.) 我最终使用上面的“组件”作为 Route 中的 props 之一。我注意到互联网上的许多示例都使用“处理程序”。但是，当我在代码中使用“处理程序”时......它不起作用......它们有什么不同？

https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md

根据上面的链接，这是旧API和新API的区别。

4.) 我已经按照上面的方式定义了我的路线，但是当我使用该页面时，最初不会呈现，但是如果我单击浏览器上的后退按钮，然后单击前进按钮，它就会呈现。我该如何解决这个问题？

我已经在第 2 条的答案中回答了这个问题。)。 但基本上，对我来说，我在路径周围添加了 {}，它就开始正确渲染。

例如

<Link to={"/managedata"} className="item"  >
        <i className="block layout icon"></i>
            Manage Data
    </Link>