2.4 KiB

Raw Blame History

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 (

App

About Inbox Messages { this.props.children }

) } }

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" ... /> ... `

2.4 KiB Raw Blame History