提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[React Router v4] Use URL Parameters

React url use Router v4 parameters
2023-09-14 09:00:52 时间

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>

 

相关文章