Redirect to a page that only show the contents of a component/page using React Router

user_13086484 0
Viewed 127

So when I click on a link (for example, the Category 1 link), I want it to redirect me to a page where only the contents of the Category1 component are shown, while the links (from Category 1 to 3) of the SelectCategory component are hidden. Instead, what happens is that the SelectCategory component is still showing while the content of the selected link are just put at the bottom of this component. And then I want to have a Home link in each category that takes me back to the homepage. (I attempted to do it below, but it fails.) Another problem I have is that whenever I click on a category link, I still need to refresh the page to show the contents of that category. Please help.

In summary, this is what I want:

  1. Only show the contents of a selected link (or, component).
  2. Have a Home link that takes me back to the homepage.
  3. Show content of selected link without refreshing the page.

Here's my code:

App.js

import './App.css';
import { BrowserRouter as Router } from 'react-router-dom';
import SelectCategory from './components/pages/categories/SelectCategory';

const App = () => {
    return (
        <Router>
            <div className='App'>
                <SelectCategory />
            </div>
        </Router>
    );
};

export default App;

SelectCategory.js

import React from 'react';
import { Link, BrowserRouter as Switch, Route } from 'react-router-dom';
import Category1 from './Category1';
import Category2 from './Category2';
import Category3 from './Category3';
// import App from '../../../App';

const SelectCategory = () => {
    return (
        <div>
            <h1>Select A Category</h1>
            <ul>
                <li>
                    <Link to='/category1'>Category 1</Link>
                </li>
                <li>
                    <Link to='/category2'>Category 2</Link>
                </li>
                <li>
                    <Link to='/category3'>Category 3</Link>
                </li>
            </ul>
            {/* <Link to='/'>Home</Link> */}
            <Switch>
                <Route exact path='/category1' component={Category1} />
                <Route exact path='/category2' component={Category2} />
                <Route exact path='/category3' component={Category3} />

                {/* An attempt to make a link redirect back to the homepage */}
                {/* <Route exact path='/' component={App} /> */}
            </Switch>
        </div>
    );
};

export default SelectCategory;

Category1.js

import React from 'react';

const Category1 = () => {
    return (
        <div>
            <h1>This is Category 1</h1>
        </div>
    );
};

export default Category1;

Category2.js

import React from 'react';

const Category2 = () => {
    return (
        <div>
            <h1>This is Category 2</h1>
        </div>
    );
};

export default Category2;

Category3.js

import React from 'react';

const Category3 = () => {
    return (
        <div>
            <h1>This is Category 3</h1>
        </div>
    );
};

export default Category3;
react-router-dom react-router reactjs javascript
2 Answers

Change this line in SelectCategory.js.

import { Link, BrowserRouter as Switch, Route } from 'react-router-dom';

to

import { Link, Switch, Route } from 'react-router-dom';
user_84400560

Issues

Typo in SelectCategory component, BrowserRouter as Switch should just be Switch since your router is running in App.

Solution

  • Fix the import.
  • Conditionally render the category links

In SelectCategory you can render the category links into a route that exactly matches the "home" path ("/") with the link back to home outside the route so it is always rendered. In order to redirect back to your "home" path you actually need a route rendering a "/" to be redirected to. Render an empty Route for the "/" path and finally render a Redirect component to "/" to handle any paths not handled by the Switch.

import { Link, Switch, Route, Redirect } from 'react-router-dom';

const SelectCategory = () => {
  return (
    <div>
      <ul>
        <h1>Select A Category</h1>
        <Route exact path="/">
          <li>
            <Link to="/category1">Category 1</Link>
          </li>
          <li>
            <Link to="/category2">Category 2</Link>
          </li>
          <li>
            <Link to="/category3">Category 3</Link>
          </li>
        </Route>
        <li>
          <Link to="/">Home</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/category1" component={Category1} />
        <Route path="/category2" component={Category2} />
        <Route path="/category3" component={Category3} />
        <Route path="/"></Route>
        <Redirect to="/" />
      </Switch>
    </div>
  );
};

Edit redirect-to-a-page-that-only-show-the-contents-of-a-component-page-using-react-r

user_86908570
Related