react-router-dom示例讲解（一）——基本使用

在react-router-dom的官方教程中，一共给出12个示例，但是个人认为，着12个示例看着真的很累人，很多写法，不是标准的企业项目应用的写法，所以针对这个现状，我想用企业项目开发的要求，对教程中的每一个示例进行重写，这篇教程就是它的第一个示例——基本使用。

原则上，我默认为你已经搭建好了关于react-router-dom的脚手架开发环境，这里不进行赘述。如果有不明白的，具体可查看这篇文章——使用create-react-app搭建react项目的开发环境

我自己实现的效果如下：

第一步、根据改造好的界面，在App.js中，我这样配置我的路由。

//render函数中：
<Router>
    <div>
        <ul>
            <li><Link to='/'>首页</Link></li>
            <li><Link to='/about'>关于</Link></li>
            <li><Link to='/topics'>主题列表</Link></li>
        </ul>
        <hr/>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
    </div>
</Router>

Router作为App.js一个根组件，其中里面的Link组件申明了路由的跳转路径，Route组件申明了组件根据不同的路径，所展示的不同视图。

然后就实现了不同的路径切换的时候，展示了不同的视图。

但是这个示例的另一个难点就是Topics组件，在这个组件中，它自己会展示自己的子路由！！！

我是这样进行Topics组件的子路由实现的：

//render函数中：
<div>
    <h1>主题列表</h1>
    <ul>
        <li>
            <Link to={`${this.props.match.url}/rendering`}>
                使用 React 渲染
            </Link>
        </li>
        <li>
            <Link to={`${this.props.match.url}/components`}>
                组件
            </Link>
        </li>
        <li>
            <Link to={`${this.props.match.url}/props-v-state`}>
                属性 v. 状态
            </Link>
        </li>
    </ul>

    <Route path={`${this.props.match.url}/:topicId`} component={Topic}/>
    <Route exact path={this.props.match.url} render={() => (
        <h3>请选择一个主题。</h3>
    )}/>
</div>

这个子路由中，没有使用Router组件包含Link组件以及Route组件，但是作为核心的Link组件以及Route组件都是存在的。其中Link负责路由选择，Route负责视图展示。在默认路径的情况下，给一个用于提示信息的Route（也就是上面的请选择一个主题）。

子路由使用到的Topic组件，非常简单，仅仅是用来展示Topics组件传递下来的topicId。

export default class Home extends Component{
    render(){
        return (
            <div>
                {this.props.match.params.topicId}
            </div>
        )
    }
}

如果还有不明白，请参阅我的关于这个示例的github地址：
https://github.com/liwudi/react-router-dom1.git

下一篇：react-router-dom示例讲解（二）——url路径参数