NervJS / nerv

A blazing fast React alternative, compatible with IE8 and React 16.
https://nerv.aotu.io
MIT License
5.43k stars 267 forks source link

与react-router配合使用, hashchange时页面无反应 #58

Open wslx520 opened 6 years ago

wslx520 commented 6 years ago

表现为 点链接 hashchange 了, 但页面没变化; 但此时F5刷新,能渲染指定路由

另开issue放代码. 代码是常见的 react 结构: index 是entry, 它引入 app 并渲染; app引入了router和两个组件 hello和about, 组合后导出

Hello.jsx

import Nerv from 'nervjs'

class Hello extends Nerv.Component {
    constructor() {
        super(...arguments);
        this.state = {
            message: 'world'
        }
    }
    render() {
        return (
            <div>
                Hello, {this.state.message}
            </div>
        )
    }
}

export default Hello

About.jsx

import Nerv from 'nervjs'

export default function About() {
    return <div>me, <span className="red" style={{'color':'red'}}>red</span></div>
}

App.jsx

import Nerv from 'nervjs'
import { HashRouter as Router, Route, Link } from 'react-router-dom';

import Hello from './Hello';
import About from './About';
// import Topics from './Topics';

const App = () => (
    <Router>
        <div>
            <div className="header">
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                        <li><Link to="/topics">Topics</Link></li>
                    </ul>
                </nav>
            </div>
            <hr />
            <Route exact path="/" component={Hello} />
            <Route path="/about" component={About} />
            {/* <Route path="/topics" component={Topics} /> */}
        </div>
    </Router>
);

export default App

index.jsx

// require('es5-polyfill')
import Nerv from 'nervjs'
import App from './App'

Nerv.render(<App />, document.getElementById('app'))

如有需要, 我再提供 webpack.config.js , 也是初级代码. 对了, 我用的 webpack最新版: "webpack": "^4.4.1", "webpack-cli": "^2.0.13", "webpack-dev-server": "^3.1.1"

yuche commented 6 years ago

试试安装 Nerv 最新的版本 (1.2.17)。

wslx520 commented 6 years ago

@yuche 正常了耶! 我看 1.2.17 刚发, 好敬业. 🥇 顺便问一句,1.2.16出现的这个问题是为什么呢?

yuche commented 6 years ago

因为即便老组件的 children 和新组件的 children 引用相同, React 也会继续 diff/patch,修改成和 React 一样的行为就可以了。

xf789675 commented 6 years ago

A Router may have only one child element 报这个错是为什么?

yuche commented 6 years ago

应该是 react-router 的报错,就是字面上的意思,一个 router 只能有一个子元素。

xf789675 commented 6 years ago

嗯,要用个div包起来

hejinguo commented 5 years ago

@wslx520 @xf789675 请问nerv与react-router2.3.0使用时,提示:RouterContext.js:40 Uncaught TypeError: _react2.default.createClass is not a function 在使用过程中有遇到吗?您是如何处理的?

chwan97 commented 4 years ago

@wslx520 @xf789675 请问nerv与react-router2.3.0使用时,提示:RouterContext.js:40 Uncaught TypeError: _react2.default.createClass is not a function 在使用过程中有遇到吗?您是如何处理的?

太南了,朋友,你找了多久,是不是几年没变的样板代码项目的问题

chwan97 commented 4 years ago
react-router-dom

使用了react-router-dom,页面在IE8下能正常工作吗