reactjs react-router-dom - استخدام React-Router مع صفحة تخطيط أو مكونات متعددة لكل صفحة




v4 tutorial (3)

يمكن أن يكون المكون وظيفة تقوم بإرجاع JSX.

  <Route>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="Invite" component={()=>(<div><Home/><Invite/></div>)} />
    </Route>
  </Route>

أقوم بإضافة موجّه الاستجابة إلى مشروع موجود.

في الوقت الحاضر يتم تمرير نموذج إلى مكون الجذر الذي يحتوي على عنصر ملاحة للملاحة الفرعية ومكون رئيسي.

أمثلة على جهاز التوجيه رد فعل لقد وجد فقط مكون تابع واحد ، ما هي أفضل طريقة لتغيير مكونات فرعية متعددة دون تكرار رمز تخطيط في كل منهما؟


إذا كنت قد فهمتك بشكل صحيح ، لتحقيق ذلك ، يمكنك تحديد مكونات متعددة في Route الخاص بك. يمكنك استخدامه مثل:

// think of it outside the context of the router, if you had pluggable
// portions of your `render`, you might do it like this
<App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/>

// So with the router it looks like this:
const routes = (
  <Route component={App}>
    <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}}/>
    <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
      <Route path="users/:userId" component={Profile}/>
    </Route>
  </Route>
)

class App extends React.Component {
  render () {
    const { main, sidebar } = this.props;
    return (
      <div>
        <div className="Main">
          {main}
        </div>
        <div className="Sidebar">
          {sidebar}
        </div>
      </div>
    )
  }
}

class Users extends React.Component {
  render () {
    return (
      <div>
        {/* if at "/users/123" `children` will be <Profile> */}
        {/* UsersSidebar will also get <Profile> as this.props.children,
            so its a little weird, but you can decide which one wants
            to continue with the nesting */}
        {this.props.children}
      </div>
    )
  }
}

تحقق أيضا من التطبيق سبيل المثال الشريط الجانبي ، ينبغي أن تساعدك أكثر.

تعديل: حسب تعليق @ Luiz:

في أحدث إصدار من جهاز التوجيه (v3) تكون المكونات في جذر كائن الدعائم

وبالتالي:

const { main, sidebar } = this.props.children;

يصبح:

const { main, sidebar } = this.props;

تحرير: في رد فعل الموجه v4 هذا يمكن أن يتحقق مثل (على النحو المنصوص عليه في مستندات جديدة ):

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

// Each logical "route" has two components, one for
// the sidebar and one for the main area. We want to
// render both of them in different places when the
// path matches the current URL.
const routes = [
  { path: '/',
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  { path: '/bubblegum',
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  { path: '/shoelaces',
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
]

const SidebarExample = () => (
  <Router>
    <div style={{ display: 'flex' }}>
      <div style={{
        padding: '10px',
        width: '40%',
        background: '#f0f0f0'
      }}>
        <ul style={{ listStyleType: 'none', padding: 0 }}>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/bubblegum">Bubblegum</Link></li>
          <li><Link to="/shoelaces">Shoelaces</Link></li>
        </ul>

        {routes.map((route, index) => (
          // You can render a <Route> in as many places
          // as you want in your app. It will render along
          // with any other <Route>s that also match the URL.
          // So, a sidebar or breadcrumbs or anything else
          // that requires you to render multiple things
          // in multiple places at the same URL is nothing
          // more than multiple <Route>s.
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.sidebar}
          />
        ))}
      </div>

      <div style={{ flex: 1, padding: '10px' }}>
        {routes.map((route, index) => (
          // Render more <Route>s with the same paths as
          // above, but different components this time.
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        ))}
      </div>
    </div>
  </Router>
)

export default SidebarExample

تأكد من الاطلاع على مستندات React Router v4 الجديدة هنا: https://reacttraining.com/react-router/


أعتقد أن أبسط طريقة هي:

type InputEvent = React.ChangeEvent<HTMLInputElement>;
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;

update = (e: InputEvent): void => this.props.login[e.target.name] = e.target.value;
submit = (e:  ButtonEvent): void => {
    this.props.login.logIn();
    e.preventDefault();
}




reactjs react-router