带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}/>} />

学到更多