У меня есть следующий компонент, который использует 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-адрес?
Link
получает формат URL-адреса на основе используемогоhistory
. - person Josh David Miller   schedule 05.01.2016Site
? - person Josh David Miller   schedule 06.01.2016