วิธีแสดงพาเรนต์คอนเทนเนอร์บนเราเตอร์หลัก

ฉันกำลังพยายามแสดงส่วนประกอบคอนเทนเนอร์และใช้เราเตอร์ react เวอร์ชันเก่ากว่าที่ฉันเคยเห็นคนทำสิ่งนี้:

const AppRouter = () => (
  <Router component={App}>
    <Route exact path="/" component={Dashboard} />
  </Router>
);

องค์ประกอบแอปของฉันมีลักษณะอย่างไร:

import React, { PropTypes } from 'react';


class App extends React.Component {
  render() {
    return (
        <div>
          <p>Hello...</p>
          {this.props.children}
        </div>
      );
  }
}

export default App;

package.json ของฉันมีสิ่งนี้ในปัจจุบัน:

dependencies": {
    "history": "^4.7.2",
    "moment": "^2.20.1",
    "react": "^16.2.0",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

BTW ฉันจำเป็นต้องนำเข้า react-router และ react-router-dom และ react-router-redux เมื่อใช้ react-router 4.2 หรือไม่


reactjs react-router
person Blankman    schedule 21.01.2018    source แหล่งที่มา
comment
คุณกำลังพยายามแสดงส่วนประกอบตามเส้นทางภายในส่วนประกอบ App ของคุณหรือไม่   -  person Rosmarine Popcorn    schedule 22.01.2018
comment
ฉันไม่คิดว่าคุณสามารถใช้เราเตอร์แบบนั้นได้ อย่างน้อยก็ไม่ใช่ใน react-router v4 สิ่งที่คุณสามารถทำได้คือใช้ ‹Route component={App}› ซึ่งก็แค่ใช้ Route แทน จากนั้นคุณก็พันเราเตอร์ไว้รอบ ๆ ทั้งหมดนั้น คุณไม่จำเป็นต้องนำเข้า react-router หากคุณได้นำเข้า react-router-dom แล้ว และคุณไม่จำเป็นต้องนำเข้า redux หากคุณไม่ได้ใช้งาน   -  person kng    schedule 22.01.2018

คำตอบ (2)


arrow_upward
1
arrow_downward

คุณเพียงแค่เขียนมันเช่นนั้น:

const AppRouter = () => (
  <Router>
    <div>
      <App />
      <Route exact path="/" component={Dashboard} />
    </div>
  </Router>
);
person Matus    schedule 22.01.2018
comment
ฉันได้รับข้อผิดพลาด: A <Router> may have only one child element - person Blankman; 23.01.2018

arrow_upward
0
arrow_downward

โปรดลดระดับ react-router เป็น 2.3.0

หวังว่ามันจะได้ผล

person Japar Sathik    schedule 22.01.2018