-
Notifications
You must be signed in to change notification settings - Fork 319
react router redux的路由例子
司徒正美 edited this page May 19, 2017
·
1 revision
是基于这个项目改过来的(https://github.com/reactjs/react-router-redux/) 注意react-router的版本号为3.0 所有文件可以从这里下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
.aaa {
width: 200px;
height: 200px;
background: red;
}
.bbb {
width: 200px;
height: 200px;
background: lawngreen;
}
</style>
<!--<script type='text/javascript' src="./dist/React.js"></script>-->
<script src="./test/react.js"></script>
<script src="./test/react-dom.js"></script>
<script src="./test/redux.js"></script>
<!-- <script src="https://cdn.bootcss.com/react-router/3.0.0-beta.1/ReactRouter.js"></script> -->
<script src="./ReactRouter.js"></script>
<script src="./test/react-redux.js"></script>
<script src="./test/ReactRouterRedux.js"></script>
<script src="./test/babel.js"></script>
<script type='text/babel'>
var s
window.onload = function(){
var combineReducers = Redux.combineReducers
var createStore = Redux.createStore
var Component = React.Component
var Provider = ReactRedux.Provider
var connect = ReactRedux.connect
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var IndexRoute=ReactRouter.IndexRoute
var browserHistory= ReactRouter.browserHistory
var Link = ReactRouter.Link
var syncHistoryWithStore = ReactRouterRedux.syncHistoryWithStore
var routerReducer= ReactRouterRedux.routerReducer
const INCREASE = 'INCREASE'
const DECREASE = 'DECREASE'
const initialState = {
number: 1
}
// reducers
function reducers(state = initialState, action) {
if(action.type === INCREASE) {
return { number: state.number + action.amount }
}
else if(action.type === DECREASE) {
return { number: state.number - action.amount }
}
return state
}
function increase(n) {
return {
type: INCREASE,
amount: n
}
}
function decrease(n) {
return {
type: DECREASE,
amount: n
}
}
//======== 组件 =========
function App({ children }) {
return (
<div>
<header>
Links:
{' '}
<Link to="/">Home</Link>
{' '}
<Link to="/foo">Foo</Link>
{' '}
<Link to="/bar">Bar</Link>
</header>
<div>
<button onClick={() => browserHistory.push('/foo')}>Go to /foo</button>
</div>
<div style={{ marginTop: '1.5em' }}>{children}</div>
</div>
)
}
function Bar() {
return <div>And I am Bar!</div>
}
function Foo() {
return <div>I am Foo!</div>
}
function Home({ number, increase, decrease }) {
return (
<div>
<p>Some state changes:</p>
<p> {number} </p>
<p>
<button onClick={() => increase(1)}>Increase</button>
<button onClick={() => decrease(1)}>Decrease</button>
</p>
</div>
)
}
var Home = connect(
state => ({ number: state.number }),
{ increase, decrease }
)(Home)
const reducer = combineReducers({
...reducers,
routing: routerReducer
})
const store = createStore(
reducer
)
const history = syncHistoryWithStore(browserHistory, store)
console.log(history)
ReactDOM.render(
<Provider store={store}>
<div>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="foo" component={Foo}/>
<Route path="bar" component={Bar}/>
</Route>
</Router>
</div>
</Provider>,
document.getElementById('mount')
)
}
</script>
</head>
<body>
<div>这个默认会被清掉</div>
<div id='mount'></div>
</body>
</html>
``html
<script type='text/javascript' src="./dist/React.js"></script> <script type='text/javascript' src="./test/react.development.js"></script> <script type='text/javascript' src="./test/react-dom.development.js"></script><script type='text/javascript' src="./lib/babel.js"></script>
<pre>应该等于
</pre>
<h1 id='root' class="root">
</h1>
<script type='text/babel'>
var container = document.getElementById("example")
var div = container
var PropTypes = React.PropTypes
if(!window.ReactDOM){
window.ReactDOM = React
}
var expect = function(a) {
return {
toBe: function(b) {
console.log(a,"vs", b, a === b)
},
toEqual(b){
console.log(a,"vs", b, a +""=== b+"")
},
toThrow(b){
try{
a()
}catch(e){
console.log(e,"vs", b, e.message +""=== b+"")
}
}
}
}
const Hello = ({ name }) => <h1>Hello {name}!</h1>;
class ShowMyError extends React.Component {
constructor(props) {
super(props);
this.state = { error: false };
}
componentDidCatch(error, info) {
console.log(error, info)
this.setState({ error, info });
}
render() {
if (this.state.error) {
return (
<div>
<h1>
Error AGAIN: {this.state.error.toString()}
</h1>
{this.state.info &&
this.state.info.componentStack.split("\n").map(i => {
return (
<div key={i}>
{i}
</div>
);
})}
</div>
);
}
return this.props.children;
}
}
class Broken extends React.Component {
constructor(props) {
super(props);
this.state = { throw: false, count: 0 };
}
render() {
if (this.state.throw) {
throw new Error("YOLO");
}
return (
<div>
<button
onClick={e => {
this.setState({ throw: true });
}}
>
button will render error.
</button>
<button onClick={e => {
this.setState(({ count }) => ({
count: count + 1
}));
}}>button will not throw</button>
<div>
{"All good here. Count: "}{this.state.count}
</div>
</div>
);
}
}
class App extends React.Component {
render() {
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
return (
<div style={styles}>
<Hello name="ShowMyError" />
<h2>
Start clicking to see some {"\u2728"}magic{"\u2728"}
</h2>
<ShowMyError>
<Broken />
</ShowMyError>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));