Динамический компонент с React Router

Question

В данный момент я изучаю React Router и хотел бы узнать, можно ли перевести Topics.js в новый компонент и удалить ссылки вверху при нажатии?.

Как, скажем,я хочу, чтобы вместо ссылки были карточки, и когда я щелкаю по карточкам, я хочу, чтобы ссылки исчезли и оказались на новой странице, поэтому на странице появится только компонент Topic.js

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

Answer 1

Похоже, что вы должны сделать область заголовка своим собственным компонентом, а затем сделать этот компонент частью домашнего компонента, но не темы

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

Узнать больше