Question

我有以下使用ReactRouter的组件：

＆＃13;

'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

＆＃13;

当我运行我的应用并查看来源时，链接组件分别呈现给localhost:3000/#/和localhost:3000/#/roadmap，而不是localhost:3000/和localhost:3000/roadmap，这是意外的行为。它能是什么？

注意：我正在使用同构，它似乎与这种意外行为有关。我在浏览器控制台上看到了这个：

Warning: React attempted to reuse markup in a container but the checksum
was invalid. This generally means that you are using server rendering and
the markup generated on the server was not what the client was expecting.
React injected new markup to compensate which works but you have lost
many of the benefits of server rendering. Instead, figure out why the
markup being generated is different on the client or server:

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

注2：根据要求，这是我的路由器代码：

routes.js

＆＃13;

'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

＆＃13;

客户端：

＆＃13;

'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'))

＆＃13;

服务器侧

＆＃13;

'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

＆＃13;

注3： 我发现如果我使用 routes.js routesA（JSX语法），链接将返回 hash （＃/），但是如果我使用routesB（plain array），链接按预期返回（/）。如何使用JSX语法并返回正确的URL？

Answer 1

您使用的是什么版本的react-router？

如果您仍在使用1.0.x，请在stackoverflow上检查this answer，在GitHub上检查this issue ticket。

我碰巧遇到了这个问题，发现我还在使用1.0.3，这是npm的最新版本。

然而，GitHub和docs上最新版本的react-router适用于2.0.x。

您可以使用以下npm命令将 react-router 版本更新为测试版（目前 2.0.0-rc4 ）：npm install --save react-router@beta。

ReactRouter链接渲染＃/而不是/

1 个答案: