1

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

1
  • Are you talking about removing the navigational bar? That would just be moving the Nav bar either to its own component and put that in the Home component, or just putting it in the home component directly, but I don't know why you'd want to, since it makes your page un-navigable. Otherwise, what you're probably talking about would be a CSS problem. Edit: It's probably a CSS problem. If you want a modal, you may look into adding unpkg.com/bootstrap to the setup Commented May 14, 2019 at 20:33

2 Answers 2

4

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

Sign up to request clarification or add additional context in comments.

Comments

2

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.