美文网首页
Guide-2019-05-09-React Router 4.

Guide-2019-05-09-React Router 4.

作者: 自律财富自由 | 来源:发表于2019-05-09 15:52 被阅读0次

    最新版本的react-router 4.x,官方文档只有英文的,无奈英文看起来比较费力,大部分人是不是跟我一样,先找中文资料,实在没办法再去看英文原版,嘿嘿嘿。
    找不到中文的,那我就自己来翻译一下吧,边翻译边学习。

    指南

    • 快速开始

    1、创建一个react项目

    npm install -g create-react-app
    create-react-app demo-app
    cd demo-app
    

    2、引入react-router-dom

    npm install react-router-dom
    

    3、简单路由举例

    import React from "react";
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    
    function Index() {
      return <h2>Home</h2>;
    }
    
    function About() {
      return <h2>About</h2>;
    }
    
    function Users() {
      return <h2>Users</h2>;
    }
    
    function AppRouter() {
      return (
        <Router>
          <div>
            <nav>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about/">About</Link></li>
                <li><Link to="/users/">Users</Link></li>
              </ul>
            </nav>
    
            <Route path="/" exact component={Index} />
            <Route path="/about/" component={About} />
            <Route path="/users/" component={Users} />
          </div>
        </Router>
      );
    }
    
    export default AppRouter;
    

    4、嵌套路由举例

    /topics路径加载Topics组件,而Topics组件又根据动态参数id进一步渲染不同的内容
    import React from "react";
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    
    function App() {
      return (
        <Router>
          <div>
            {* 导航头Header组件 *}
            <Header />
    
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
          </div>
        </Router>
      );
    }
    function Header() {
      return (
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/topics">Topics</Link></li>
        </ul>
      );
    }
    
    function Home() {
      return <h2>Home</h2>;
    }
    
    function About() {
      return <h2>About</h2>;
    }
    
    function Topics({ match }) {
      return (
        <div>
          <h2>Topics</h2>
    
          <ul>
            <li><Link to={`${match.url}/components`}>Components</Link></li>
            <li><Link to={`${match.url}/props-v-state`}>Props v. State</Link></li>
          </ul>
          {*在这里根据参数id渲染Topic组件的内容
            (这个参数id就是上面<Link>标签中to属性/后面的值,分别是component, props-v-state)
           *}
          <Route path={`${match.path}/:id`} component={Topic} />
    
          {*这里是默认显示的内容*}
          <Route exact path={match.path} render={() => <h3>Please select a topic.</h3>}/>
        </div>
      );
    }
    
    function Topic({ match }) {
      return <h3>Requested Param: {match.params.id}</h3>;
    }
    
    export default App;
    

    相关文章

      网友评论

          本文标题:Guide-2019-05-09-React Router 4.

          本文链接:https://www.haomeiwen.com/subject/rziwoqtx.html