2.4 KiB
title | localeTitle |
---|---|
React Router Cheatsheet | رد فعل تشاتر راوتر |
استنادًا إلى http://ricostacruz.com/cheatsheets/react-router.html ولكن تم تحديثه لـ v2.0.0 من React Router.
الأساسية
`import { render } from 'react-dom' import { Router, Route, browserHistory } from 'react-router'
// Import RootView and NoMatch
render(( ), document.getElementById('app')) `
التعشيش
`import React from 'react' import { render } from 'react-dom' import { Router, Route, browserHistory } from 'react-router'
// Import About, Inbox and Messages
class Chrome extends React { render () { return (
) } }render(( ), document.getElementById('app')) `
عنوان بارامز
class Message extends React { componentDidMount() { // from the path `/inbox/messages/:id` const id = this.props.params.id ...
حلقة الوصل
``import { Link } from 'react-router'
/* Nav Component */ ... render() { ... const userId = 10;
return (
// Adding params is as simple as appending them to the route
<Link to={`user/${userId}`}>User 10</Link>
// Classes can be added to the link element if the current route is the one they link to
<Link to="login"
activeClassName="-active">Login</Link>
)
} ``
التكوين الأخرى
`
// arbitrary/url/login -> /arbitrary/url/sessions/new // arbitrary/url/about/1 -> /arbitrary/url/profile/1
<Route name="about-user" ... /> ... `