Маршрутизация не работает в Reactjs + ES6

Question

Когда я нажимаю на ссылку "торт", я получаю сообщение об ошибке, путь не совпадает или сервер не может найти.

Вот мой код для 3 файлов - Маршрутизатор, Навигация и детализация компонентов

Routers.js- компонент, обрабатывающий маршрутизацию

---

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import {CreateHashHistory} from 'history';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { browserHistory } from 'react-router';

import Base from './Base.jsx';
import ListDetail from './ListDetail.jsx';

let Routes = 

        <Router history={browserHistory}>
            <Route path="/" component={Base} >
                <Route path="/cake" component= {ListDetail}></Route>

            </Route>
        </Router>

 export default Routes;

---

Компоненты навигации - обработка навигационных ссылок

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';


class ContentList extends React.Component {
    render(){
        return(
            <div id="innercontent">
            <h2>What you love?</h2>
            <ul >
                <Link to={'/cake'}>Cakes</Link>
                <Link to={'/icecream'}>icecream</Link>
                <Link to={'/browin'}>browin</Link>
            </ul>
            </div>
        )
    }
}

export default ContentList;

---

Деталь компонента - Детальная страница для отображения

import React from 'react';

import ReactDOM from 'react-dom';

class ListDetail extends React.Component {
    render(){
        return(
            <div>
            <h1>hi Details</h1>


            </div>
        )
    }
}


export default ListDetail;

---

Base.JSX

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header.jsx';
import Footer from './footer.jsx';
import ContentList from './contentList.jsx';
import FormElement from './form.jsx';
import ListDetail from './ListDetail.jsx';

class Base extends React.Component {
    render(){
        return(
            <div>
            <Header name="My Recipe Book"/>
            <section id="content">
            <FormElement />
             <ContentList />
            </section>
            <Footer />
            <ListDetail />
            </div>
        )
    }
}

База экспорта по умолчанию;

Main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router.jsx';

ReactDOM.render(Routes, document.getElementById('app'));

Спасибо за помощь!!

Answer 1

Функция рендеринга вашего файла base.jsx должна выглядеть примерно так:

render(){
    return(
        <div>
        <Header name="My Recipe Book"/>
        <section id="content">
        <FormElement />
        <ContentList />
         {this.props.children}
        </section>
        <Footer />
        </div>
    )
}

Маршрут должен быть

<Route path="cake" component= {ListDetail} />

И ссылка:

<Link to="cake">Cakes</Link>

Вам нужно где-то рендерить маршруты.

... Отдельный компонент, который будет отображаться, когда маршрут соответствует URL. Он может быть обработан родительским компонентом маршрута с помощью this.props.children. Прочитай это.

const routes = (
  <Route path="/" component={App}>
    <Route path="groups" component={Groups} />
    <Route path="users" component={Users} />
  </Route>
)

class App extends React.Component {
  render () {
    return (
      <div>
        {/* this will be either <Users> or <Groups> */}
        {this.props.children}
      </div>
    )
  }
}

Answer 2

Вам не нужно / в /cakeэто уже под /, Сделай это так:

<Route path="cake" component={ListDetail} />

Answer 3

Попробуйте следующее, не уверен, поможет ли это. 1. Используйте

   var ContentList = React.createClass({}) 

вместо

    class ContentList extends React.Component.

2. удалите / перед "торт" в вашем пути маршрута.

3. попробуйте использовать

    var Routes = React.createClass({
     render: function() {
      return (
       <div>
           <Router history={browserHistory}>     
   

и ваш обновленный код вместо пусть

Надеюсь, поможет

Answer 4

Работает ли это с hashHistory?

Чтобы использовать browserHistory, вам нужно настроить рендеринг на стороне сервера.

Вот учебник (особенно уроки 11 и 13), который помог мне понять и настроить реактив-маршрутизатор с использованием browserHistory и рендеринга на стороне сервера: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/

Надеюсь, поможет.