Реагировать маршрутизатор реализация

Question

Я новичок в ReactJS и я учусь, как использовать реагировать-маршрутизатор для маршрутизации, но react-router documentation только была источником моего разочарования, так что я должен пойти в другое место, чтобы понять, Это.

Это мой код:

ReactDOM.render((
     <ReactRouter> 
      <ReactRouter.Route path="/" component={App}> 
       <ReactRouter.Route path="create" component={CreateRecipe} /> 
       <ReactRouter.Route path=":id" component={ShowRecipe}> 
        <ReactRouter.Route path="edit" component={EditRecipe} /> 
        <ReactRouter.Route path="delete" component={DeleteRecipe} /> 
       </ReactRouter.Route> 
      </ReactRouter.Route> 
     </ReactRouter> 
    ), document.getElementById("app-container")); 

Но при загрузке в браузере я получаю следующее сообщение об ошибке в консоли моего браузера.

Предупреждение: React.createElement: тип не должен быть пустым, не определено, логическое, или номер. Он должен быть строкой (для элементов DOM) или ReactClass (для составных компонентов).

Пожалуйста, что может быть причиной и как я могу ее решить?

Answer 1

Ваши маршруты должны быть обернуты внутри маршрутизатора, поэтому <ReactRouter> должен быть <ReactRouter.Router>.

ReactDOM.render((
    <ReactRouter.Router> 
     <ReactRouter.Route path="/" component={App}> 
      <ReactRouter.Route path="create" component={CreateRecipe} /> 
      <ReactRouter.Route path=":id" component={ShowRecipe}> 
       <ReactRouter.Route path="edit" component={EditRecipe} /> 
       <ReactRouter.Route path="delete" component={DeleteRecipe} /> 
      </ReactRouter.Route> 
     </ReactRouter.Route> 
    </ReactRouter.Router> 
), document.getElementById("app-container")); 

Если вы хотите, чтобы очистить свой код, вы можете заменить все твое ReactRouter.Router на Router и ReactRouter.Route по Route, а затем адаптировать свой код:

var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 

Я предлагаю вам посмотреть this video от Michael Jackson если вы» re борется с документом, чтобы понять, что вы можете сделать с реактивным маршрутизатором и несколькими примерами.