React Router Link 呈现 #/ 而不是 /

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

当我运行我的应用程序并查看源代码时，Link 组件分别呈现为 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

'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 语法），link returns 与 hash (#/)，但如果我使用 routesB（普通数组），links return 会如预期的那样 (/)。我怎样才能使用 JSX 语法和 return 正确的 URL?

Answer 1

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

如果您仍在使用 1.0.x 检查 this answer on Whosebug and this issue ticket 他们的 GitHub。

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

但是 GitHub 上的最新版本 react-router 和文档适用于 2.0.x。

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

React Router Link 呈现 #/ 而不是 /

ReactRouter Link rendering #/ instead of /

javascript

url-routing

reactjs

react-router

isomorphic-javascript