反应路由器 Questions/Issues
React-Router Questions/Issues
我决定使用 React-Router 来管理我使用 REACT JS 的 Meteor JS 应用程序的路由。
我已经让 React-Router 工作 'somehow',但它有一些负面影响,我想在这里解释一下,希望找到解决方案。
首先,这是我的代码:
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.) 当我点击 Link
到 'managedata' 我也在 URL 中得到一些随机字符
例如http://localhost:3000/#/managedata?_k=6clzfn
这是我的问题:
1.) 是什么导致这些丑陋的字符出现在 URL 中,我该如何摆脱它们?
2.) Link
是否只使用路径值?正如您在上面看到的,我的主页有一个名称 "home" 但路径为“/”,我注意到如果我将 Link
更改为 Link 到 ="home" 然后我被引导到一个 URL,路径上有一个 "home",这似乎是不正确的。
3.) 我最终使用上面的 'component' 作为 Route 中的道具之一。我注意到互联网上的许多示例都使用 'handler'。但是,当我在我的代码中使用 'handler' 时......它不起作用......
它们有何不同?
4.) 我已经按照上面的方式定义了我的路线,但是当我使用页面时最初不会呈现,但是如果我点击浏览器上的后退按钮然后点击前进按钮,它就会呈现。我该如何解决?
几个小时前我遇到了上述问题。
现在我找到了解决方案,我想 post 在这里,希望能为以后遇到同样问题的读者节省一些时间。
这里是问答:
1.) 是什么导致这些丑陋的字符出现在 URL 中,我该如何摆脱它们?
根据https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md
"If you do not specify a history type (as in the example above) then you will notice some unusual behaviour after updating to 1.0.0. With the default hash based routing a querystring entry not defined by yourself will start appearing in your URLs called "_k”。它的外观示例如下:?_k=umhx1s。“
因此将 'history' 添加到路由器中。
例如
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 更改为 Link 为 ="home" 然后我被引导到一个 URL,路径上有一个 "home",这似乎是不正确的。
阅读和试验后....
'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 中的道具之一。我注意到互联网上的许多示例都使用 'handler'。但是,当我在我的代码中使用 'handler' 时......它不起作用......它们有何不同?
https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md
在上面link的基础上,就是旧的API和新的API的区别。
4.) 我已经按照上面的方式定义了我的路线,但是当我使用页面时最初不会呈现,但是如果我点击浏览器上的后退按钮然后点击前进按钮,它就会呈现。我该如何解决?
我已经在第 2 条的答案中回答了这个问题。)。
但基本上,对我来说,我在路径周围添加了 {},它开始正确呈现。
例如
<Link to={"/managedata"} className="item" >
<i className="block layout icon"></i>
Manage Data
</Link>
我决定使用 React-Router 来管理我使用 REACT JS 的 Meteor JS 应用程序的路由。
我已经让 React-Router 工作 'somehow',但它有一些负面影响,我想在这里解释一下,希望找到解决方案。
首先,这是我的代码:
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.) 当我点击 Link
到 'managedata' 我也在 URL 中得到一些随机字符
例如http://localhost:3000/#/managedata?_k=6clzfn
这是我的问题:
1.) 是什么导致这些丑陋的字符出现在 URL 中,我该如何摆脱它们?
2.) Link
是否只使用路径值?正如您在上面看到的,我的主页有一个名称 "home" 但路径为“/”,我注意到如果我将 Link
更改为 Link 到 ="home" 然后我被引导到一个 URL,路径上有一个 "home",这似乎是不正确的。
3.) 我最终使用上面的 'component' 作为 Route 中的道具之一。我注意到互联网上的许多示例都使用 'handler'。但是,当我在我的代码中使用 'handler' 时......它不起作用...... 它们有何不同?
4.) 我已经按照上面的方式定义了我的路线,但是当我使用页面时最初不会呈现,但是如果我点击浏览器上的后退按钮然后点击前进按钮,它就会呈现。我该如何解决?
几个小时前我遇到了上述问题。 现在我找到了解决方案,我想 post 在这里,希望能为以后遇到同样问题的读者节省一些时间。
这里是问答:
1.) 是什么导致这些丑陋的字符出现在 URL 中,我该如何摆脱它们?
根据https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md
"If you do not specify a history type (as in the example above) then you will notice some unusual behaviour after updating to 1.0.0. With the default hash based routing a querystring entry not defined by yourself will start appearing in your URLs called "_k”。它的外观示例如下:?_k=umhx1s。“
因此将 'history' 添加到路由器中。 例如
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 更改为 Link 为 ="home" 然后我被引导到一个 URL,路径上有一个 "home",这似乎是不正确的。
阅读和试验后.... '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 中的道具之一。我注意到互联网上的许多示例都使用 'handler'。但是,当我在我的代码中使用 'handler' 时......它不起作用......它们有何不同?
https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md
在上面link的基础上,就是旧的API和新的API的区别。
4.) 我已经按照上面的方式定义了我的路线,但是当我使用页面时最初不会呈现,但是如果我点击浏览器上的后退按钮然后点击前进按钮,它就会呈现。我该如何解决?
我已经在第 2 条的答案中回答了这个问题。)。 但基本上,对我来说,我在路径周围添加了 {},它开始正确呈现。
例如
<Link to={"/managedata"} className="item" >
<i className="block layout icon"></i>
Manage Data
</Link>