Tại sao tôi không thể lồng các thành phần Tuyến đường trong bộ phản ứng 4.x?

Question

Làm thế nào để một thế giới sử dụng các tuyến đường lồng nhau trong react-router, cụ thể là phiên bản 4.x? Sau đây làm việc tốt trong các phiên bản trước ...

<Route path='/stuff' component={Stuff}> 
    <Route path='/stuff/a' component={StuffA} /> 
</Route> 

Nâng cấp lên 4.x ném cảnh báo sau ...

Cảnh báo: Bạn không nên sử dụng <Route> thành phần và < Route trẻ em > trong cùng một tuyến đường; < Tuyến đường trẻ em > sẽ bị bỏ qua

Điều gì đang xảy ra ở đây? Tôi đã tẩy rửa the docs trong nhiều giờ và không thể thành công có được các tuyến đường lồng nhau hoạt động. Làm cách nào để sử dụng các thành phần <Route> để tổ chức các cuộc đua của họ trong phản hồi-bộ định tuyến v4? Làm thế nào để ví dụ đơn giản của tôi chuyển thành tuân thủ API v4.x để lồng một tuyến đường?

Answer 1

Hãy quên những gì bạn biết về Bộ định tuyến phản ứng < v4. Bạn lồng các tuyến bằng cách lồng nhau theo nghĩa đen <Routes>. Kiểm tra this example. Cụ thể kiểm tra các thành phần chủ đề. Bạn không khai báo các tuyến đường của bạn lên phía trước mà thay vào đó là động khi một thành phần hiển thị.

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

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    {/* NESTED ROUTES */} 
    <Route path={`${match.url}/:topicId`} component={Topic}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select a topic.</h3> 
    )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
) 

export default BasicExample