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的随机字符。 这非常丑陋，特别是因为除了域名或localhost外，URL中只希望显示“ /”或什么也不会显示。...例如http://localhost:3000/#/?_k=q2c52z

2）当我点击Link到“ managedata”时，我也在URL中得到一些随机字符，例如http://localhost:3000/#/managedata?_k=6clzfn

这是我的问题：

1.）是什么导致这些丑陋的字符显示在URL中，我如何摆脱它们？

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

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

4.）我已经按照上述方法定义了路线，但是当我使用该页面时，最初并不会呈现该页面，但是如果我单击浏览器上的“后退”按钮，然后单击“前进”按钮，则它将呈现。 我该如何解决？

Answer 1

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

这是问与答：

1.）是什么导致这些丑陋的字符显示在URL中，我如何摆脱它们？

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

“如果您未指定历史记录类型（如上例所示），则在更新为1.0.0后会发现一些异常行为。使用默认的基于哈希的路由，您自己未定义的查询字符串条目将开始出现在您的网址中“ _k”。它的外观示例如下：？_k = umhx1s。

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

const {Router，Route，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”，但路径为“ /”，我注意到，如果我将“链接链接”更改为=“ 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中的道具之一。 我注意到互联网上的许多示例都使用“处理程序”。 但是，当我在代码中使用“处理程序”时.....不起作用.....它们有什么不同？

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>