帶React Router的動態組件

Question

我目前正在學習React Router，想知道是否有可能將Topics.js渲染到一個新組件中，並單擊click刪除頂部的鏈接。

就像我想擁有卡片而不是鏈接，並且當我單擊卡片時我希望鏈接消失並出現在新頁面上，因此僅組件Topic.js將出現在頁面上

https://stackblitz.com/edit/react-router-dynamic-routes?file=index.js

Answer 1

聽起來您應該使標頭區域成為其自己的組件，然后將該組件變成Home組件的一部分，但不使Topics成為一部分。

class App extends Component {
  render() {
    return (
        <div>
          <Route exact path='/' component={Home} />
          <Route path='/topics' component={Topics} />
        </div>
    );
  }
}

class AppLinks extends Component {
  render() {
    return (
        <div>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/topics'>Topics</Link>
            </li>
          </ul>
        </div>
    );
  }
}

export default class Home extends Component {
  render() {
    return (
      <div> 
        <AppLinks /> 
        HOME 
      </div>
    );
  }
}

Answer 2

React.lazy函數使您可以將動態導入呈現為常規組件。

const Login = React.lazy(() => import('./views/Pages/Login'));
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />

學到更多