zoukankan      html  css  js  c++  java
  • [React Router v4] Use URL Parameters

    URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

    <NavLink to="/demo" activeClassName={'active'}>Demo</NavLink>

    Match:

                    <Route
                        path="/:page"
                        children={({match}) => {
                            console.log("match:", match)
                            const page = match.params.page;
                            return match && <h2>demo: {page} </h2>
                        }}></Route>
    <NavLink to="/demo/react" activeClassName={'active'}>Demo</NavLink>

    Match:

                    <Route
                        path="/:page/:sub"
                        children={({match}) => {
                            const page = match.params.page;
                            const sub = match.params.sub;
                            return match && <h2>demo: {page} -- {sub}</h2>
                        }}></Route>
    <NavLink to="/demo-react" activeClassName={'active'}>Demo</NavLink>

    Match:

                    <Route
                        path="/:page-:sub"
                        children={({match}) => {
                            const page = match.params.page;
                            const sub = match.params.sub;
                            return match && <h2>demo: {page} -- {sub}</h2>
                        }}></Route>
  • 相关阅读:
    数据库系统原理
    Java并发编程详解读书笔记(一)
    Java基础之String
    Java基础之数据类型
    winform BackgroundWorker控件的用法
    汉子转拼音
    model验证(验证登录、注册...)
    Ajax.BeginForm 异步搜索
    Ajax.ActionLink 辅助方法实现局部刷新
    js 随笔
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6595103.html
Copyright © 2011-2022 走看看