javascript - React Router 链接渲染 #/代替/

Question

我有以下使用 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

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

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

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

(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 routesA(JSX 语法)，链接会返回 hash (#/)，但如果我使用 routesB(普通数组)，链接按预期返回 (/)。如何使用 JSX 语法并返回正确的 URL？

Answer 1

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

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

我正好也遇到了这个问题，发现我还在用1.0.3，npm上是最新的版本。

然而，GitHub 和文档上最新版本的 react-router 是针对 2.0.x 的。

您可以使用以下 npm 命令将您的 react-router 版本更新为测试版(当前为 2.0.0-rc4):npm install --save react-router@beta.