Рендеринг ReactRouter Link #/ вместо /

У меня есть следующий компонент, который использует ReactRouter:

'use strict'
import React from 'react'
import Container from '../../Elements/Container.jsx'
import Menu from '../../Collections/Menu.jsx'
import Item from '../../Elements/Item.jsx'
import {Link} from 'react-router'

const Sidebar = ( ) => {
    return (
        <Menu className='vertical purple inverted sidebar left'>
        <Item><Link to='/home'>Home</Link></Item>
        <Item><Link to='/roadmap'>Roadmap</Link></Item>
        <Item><Link to='/beta'>Beta</Link></Item>
        <Item><Link to='/about'>Sobre</Link></Item>
    </Menu>
    )
}

export default Sidebar

Когда я запускаю свое приложение и смотрю на исходный код, компоненты Link отображаются в localhost:3000/#/ и localhost:3000/#/roadmap соответственно, вместо localhost:3000/ и localhost:3000/roadmap, что является непреднамеренным поведением. Что это может быть?

Примечание. Я использую изоморфизм, и похоже, что он связан с этим непреднамеренным поведением. Я получаю это в консоли браузера:

Предупреждение: React попытался повторно использовать разметку в контейнере, но контрольная сумма оказалась неверной. Обычно это означает, что вы используете серверный рендеринг, а разметка, сгенерированная на сервере, не соответствует ожиданиям клиента. React внедрил новую разметку, чтобы компенсировать это, но вы потеряли многие преимущества серверного рендеринга. Вместо этого выясните, почему генерируемая разметка отличается на клиенте или сервере:

(client) "><a class="" href="#/" data-reactid=".2
(server) "><a class="" href="/" data-reactid=".27

Примечание 2. В соответствии с просьбой, вот мои коды маршрутизатора:

routes.js

'use strict'
import React from 'react'
import {browserHistory, Router, Route, IndexRedirect} from 'react-router'
import Page from './Page.jsx'
import Home from './Home.jsx'
import Roadmap from './Roadmap.jsx'
import Beta from './Beta.jsx'

const routesA = (
    <Router history={browserHistory>
        <Route path='/' component={Page}>
            <Route path='home' component={Home} />
            <Route path='roadmap' component={Roadmap} />
            <Route path='beta' component={Beta} />
            <Route path='about' component={undefined} />
            <IndexRedirect to='home' />
        </Route>
    </Router>
)

const routesB = {
    path: '/',
    history: browserHistory,
    component: Page,
    indexRedirect: {to: '/home'},
    childRoutes: [
        {path:'/home', component: Home},
        {path:'/roadmap', component: Roadmap},
        {path:'/beta', component: Beta},
        {path:'/about', component: undefined}
    ]
}

export default routesA

На стороне клиента:

'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import routes from './components/Pages/Main/routes.js'

ReactDOM.render(routes, document.getElementById('site'))

На стороне сервера:


'use strict'
import express from 'express'
import React from 'react'
import {renderToString} from 'react-dom/server'
import {RoutingContext, match,browserHistory} from 'react-router'
import createLocation from 'history/lib/createLocation'
import routes from '../app/components/Pages/Main/routes.js'

let server = express()

server.use((request, response) => {
    let l = createLocation(request.url)
    match({routes, location: l}, (error, redirectLocation, renderProps) => {
        if(error)
            response.send(500, error.message)
        else if(redirectLocation)
            response.redirect(302, redirectLocation.pathname + redirectLocation.search)
        else if (renderProps)
            response.render('index', {title: 'Teste', reactOutput: renderToString(<RoutingContext {...renderProps} />)})
        else
            response.send(404, 'Not found!')
    })
})

export default server

Примечание 3.
Я обнаружил, что если я использую routes.js routeA (синтаксис JSX), ссылка возвращается с хэшем ( #/), но если я использую routeB (обычный массив), ссылки возвращаются, как и ожидалось (/). Как я могу использовать синтаксис JSX и возвращать правильный URL-адрес?


person Mateus Felipe    schedule 05.01.2016    source источник
comment
Можете показать код, где заявлен роутер? Link получает формат URL-адреса на основе используемого history.   -  person Josh David Miller    schedule 05.01.2016
comment
@JoshDavidMiller: отредактировано для вставки запрошенного кода. Обратите внимание, что на стороне клиента я использую историю браузера, но на стороне сервера это не поддерживается. Поэтому мне пришлось использовать createHistory. В любом случае, я не знаю, как работает история.   -  person Mateus Felipe    schedule 05.01.2016
comment
Есть ли причина, по которой у вас есть два разных определения маршрутизатора? Почему сервер не отображает компонент Site?   -  person Josh David Miller    schedule 06.01.2016
comment
Нет причин. Но похоже, что сервер не может отображать сайт, потому что он использует browserHistory.   -  person Mateus Felipe    schedule 06.01.2016
comment
@JoshDavidMiller: я много редактировал пост. Сейчас я использую только один маршрутизатор и обнаружил, что использование синтаксиса JSX возвращает с хэшем, а использование синтаксиса простого массива возвращает, как и ожидалось. Перечитайте пост для получения дополнительной информации.   -  person Mateus Felipe    schedule 06.01.2016


Ответы (1)


Какую версию реактивного маршрутизатора вы используете?

Если вы все еще используете 1.0.x, проверьте этот ответ на stackoverflow и этот билет на их GitHub.

Я тоже столкнулся с этой проблемой и обнаружил, что все еще использую 1.0.3, последнюю версию npm.

Однако последняя версия react-router на GitHub и в документации предназначена для версии 2.0.x.

Вы можете обновить версию react-router до бета-версии (в настоящее время 2.0.0-rc4) с помощью следующей команды npm: npm install --save react-router@beta.

person andrew    schedule 06.01.2016
comment
Действительно, мой react-router имеет версию 1.0.3. Есть ли способ заставить его обновиться или мне нужно делать это вручную? - person Mateus Felipe; 06.01.2016
comment
Провел небольшое исследование. Кажется, вам нужно вручную вытащить весь код из GitHub. В настоящее время нет возможности загрузить версию 2.0.x из npm, поскольку они еще не загрузили ее. - person andrew; 06.01.2016
comment
Я обнаружил, что могу выполнить обновление с помощью команды npm install --save react-router@beta. Теперь у меня проблема с маршрутизацией. Если я решу это, я проголосую за ваш ответ. - person Mateus Felipe; 06.01.2016