Question

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

我已经让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之外，人们只会期望“/”或者只是在网址中显示任何内容.... 例如http://localhost:3000/#/?_k=q2c52z

2。）当我点击Link到'managedata'时，我也会在网址中收到一些随机字符例如http://localhost:3000/#/managedata?_k=6clzfn

以下是我的问题：

1。）导致这些丑陋角色出现在URL中的原因是什么？我如何摆脱它们？

2。）Link仅使用路径值吗？如上所示，我的主页有一个名称“home”，但路径为“/”，我注意到如果我将Link更改为Link to =“home”，那么我会被定向到一个URL道路上的“家”似乎是不正确的。

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

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

Answer 1

很久以前我遇到了上述问题。现在我已经找到了解决方案，我想在此发布，希望为将来遇到同样问题的读者节省一些时间。

这是Q和A：

1。）导致这些丑陋角色出现在URL中的原因是什么？我如何摆脱它们？

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

“如果你没有指定历史记录类型（如上例所示），那么在更新到1.0.0之后你会注意到一些异常行为。使用默认的基于散列的路由，你自己定义的查询字符串条目将开始出现在你的网址名为“_k”。它的外观如下：？_k = umhx1s。“

因此将“历史记录”添加到路由器中。 e.g。

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”但是路径为“/”，我注意到如果我将Link链接更改为=“home”，那么我将被定向到带有“home”的URL “在似乎不正确的道路上。

阅读和试验后.... 'to'的值应该是路径。它不仅应该是路径，而应该是{}包围的路径。例如，对于上面定义的路由，Link应该像这样使用：

<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。）我最终使用上面的'component'作为Route中的一个道具。我注意到互联网上的许多例子都使用“处理程序”。但是，当我在我的代码中使用“处理程序”时......它不起作用......它们有何不同？

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

基于以上链接，它是旧API和新API之间的区别。

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

我在2号的答案中回答了这个问题。但基本上，对我来说，我在路径周围加了{}，它开始正常渲染。

e.g。

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

React-Router问题/问题

1 个答案: