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