关于react-router 4.0

来源:10-1 Router概念

Nuono

2017-03-14

貌似在我学习第10-1的时候正巧react-router正式升级到了4.0版本,查了了下文档,琢磨出4.0下的代码,但是有些地方想请教下老师:

  1. 4.0中,我用4.0文档中的例子更改了视频中的代码,但是写出的页面的URL没有视频里" ?_n8lm27 "这样的字串,不知道是新版本改变了什么?还是代码遗漏了什么?

  2. 下面代码中,有一段模仿官方文档书写的代码(注释掉的部分),不太清楚其中的" ()=>() "是什么作用?和" ()=>{} "有什么关系呢?

  3. 4.0中不允许Route嵌套了,于是有什么替代的方法么?搜了些资料并没有发现解决方法,stackoverflow上有这个问题:http://stackoverflow.com/questions/42254929/how-to-nest-routes-in-react-router-v4 ,貌似也没有什么好的回答。

import React from 'react';

import ReactDOM from 'react-dom';

import Index from './index';

import ComponentList from './components/list';

import ComponentDetails from './components/details';


import {

  BrowserRouter as Router,

  Route,

  Switch,

  HashRouter

} from 'react-router-dom';


class Root extends React.Component{

  render(){

    return(

        <HashRouter>

          <div>

            <Route component={Index}/>

            <Switch>

              <Route exact path="/list" component={ComponentList}/>

              <Route path="/details" component={ComponentDetails}/>

              {/* <Route component={ErrorMessage}/> */}

            </Switch>

          </div>

        </HashRouter>

    );

  };

}


// const ErrorMessage = ()=>(

//     <h4>ErrorMessage</h4>

// )


export default Root


ReactDOM.render(<Root/>,document.getElementById('example'));


以上,问的有点多,先谢谢啦。( 17.03.15更新了下问题和代码 )

写回答

2回答

窒息炙刃

2017-03-14

es6 箭头函数,=>()默认返回括号的值.{ }则需要显式return

1
3
Nuono
回复
慕田峪9948786
很详细,谢谢你们!
2017-03-16
共3条回复

Nuono

提问者

2017-03-14

搜了半天,没有找到v4下Route嵌套的解决方案,还是先退回旧版本了。如果有解决的求告诉啊,谢谢。

0
3
兔子不打地鼠打代码
React Router 4 简易入门 https://segmentfault.com/a/1190000010174260 我也是为这个嵌套问题折磨了很久,现在也在看文档,欢迎一起思考
2018-03-06
共3条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程