Dynamic Component with React Router

Question

I'm learning React Router at the moment and would like to know if it's possible to render the Topics.js into a new component and remove the links on the top on click ?.

Like let's say i want to have cards instead of the link and when i click the cards i want the links to disappear and be on a new page, so just the component Topic.js will appear on the page

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

Answer 1

It sounds like you should make the header area its own component and then make that component a part of the Home component, but not the 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

The React.lazy function lets you render a dynamic import as a regular component.

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

Learn more