ReactRouter不能使用占位符路由

下午好我在使用ReactRouter时遇到了一些麻烦，以及它如何处理路由。我正在观看Wes Bos网络系列的React for Beginners，在跟随视频之后，我的两条路线之一不是渲染，而是在控制台中出现404错误。ReactRouter不能使用占位符路由

下面是我正在使用的代码，只是认为其他组件没有提到的工作，无论如何这是一个路由问题。

var React = require('react'); 
var ReactDOM = require('react-dom'); 


var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var Navigation = ReactRouter.Navigation; 

var createBrowserHistory = require('history/lib/createBrowserHistory');  

var App = React.createClass({ 
     render: function(){ 
      return(
      <div className="catch-of-the-day"> 
       <div className="menu"> 
        <Header tagline="Fresh Seafood Market" num="5000" /> 
       </div> 
       <Order /> 
       <Inventory /> 
      </div> 
      ) 
     } 
    }) 
    var StorePicker = React.createClass({ 
     render: function(){ 
     return(
      <form className="store-selector"> 
      {/* Comment goes in here*/} 
      <h2>Please enter A Store</h2> 
      <input type="text" ref="storeID" required /> 
      <input type="submit"/> 
      </form> 
     ) 
     } 
    }); 
    var routes = (
     <Router history={createBrowserHistory()}> 
      <Route path="/" component={StorePicker}/> 
      <Route path="/store/:storeId" component={App}/> 
     </Router> 
    ) 
    ReactDOM.render(routes, document.getElementById("main"));

因此，这是发生了什么：我家的路线是localhost:3000和路线localhost:3000/store/[whatever I type here]不工作我的部件不渲染，我得到一个404错误阅读：http://localhost:3000/store/build/main.js 404 (Not Found)。当我看着我的build/main.js文件1）它需要一段时间来加载和2）唯一提到我的路线是在25366行，所以寻找答案是没有帮助的。

有趣的是，当将路线更改为如下所示时，我不会收到此错误： <Route path="/store" component={App}/>但这是不正确的，我觉得其余视频将依赖于输入到占位符中的任何内容。我想在问题变得更糟之前解决问题。我已经几次重看视频，但没有成功。有没有人有任何想法，我一直没有与React长期合作，我相信我错过了一些东西。

我很感激帮助。

来源

2016-07-29 m00saca

我想这是因为你的路由配置不正确。

<Router history={history}> <Route path="/" component={StorePicker} > <Route path="store/:storeId" component={App} /> <Route /> </Router>

https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md

来源

2016-07-29 22:04:55 Fraccus

有趣。在'Router'组件上看到这个历史道具（？）会破坏我的应用程序。我实现了你的解决方案，它一直工作，直到我添加了历史道具。没有它，我有奇怪的URL字符串，看起来像这样：'http：// localhost：3000 /＃/ store/hello？_k = 29bdba'它看起来不干净，但它的工作原理，但是当我包含该变量时，无论是否存在“'404错误，都会在主路由中嵌套。我编辑了我的问题以显示我在此文件中包含的变量和依赖关系。 – m00saca

希望您能访问我添加的文档的链接。 :)你需要调整历史以适应你的需求。我的解决方案解决了上面列出的问题。更多的历史记录： https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md PS：另外，url params可以用历史配置清理。 – Fraccus

访问链接，但我并不真正了解我在看什么。有趣的是，您在答案中提到的第一个链接只有一次在页面上有“历史”一词。看看第二个环节更加神秘。这是我使用ReactRouter的第一天，我真的不知道自己在做什么。如果你看看我编辑过的帖子，你会看到：var createBrowserHistory = require（'history/lib/createBrowserHistory'）'，它适用于路由'/'甚至是'/ store'而不是'/ store /： storeId' – m00saca

ReactRouter不能使用占位符路由

回答

相关问题