Link component in React that does not appear in the Home component

Question

Link component in React that does not appear in the Home component

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have my main component from where I do the routing

Class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Links />
          <Route exact path="/" component={Home} />
          <Route path="/users" component={Users} />
        </div>
      </Router>
     );
   }
  }

But and the Links component only has the following:

import React from 'react';
import { Link } from 'react-router-dom';

const Links = () => (
  <nav>
    <Link to="/">Home</Link>
  </nav>
 );

export default Links;

What I want is that it only appears when I download the User component, which when I click back to the Home, but I do not want it to appear when I'm in Home because it's unnecessary.

Can it be done? Thanks!

reactjs react router

asked by paula 25.10.2018 в 17:05

source

2 answers

More than two roles in YII2 Tried POST in AndroidStudio (error 400)

score 0 · Answer 1

I recommend you nest your routes in the Switch component of the React Router. Then try placing the exact prop in the path of users. It would fit you as follows:

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

<BrowserRouter>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/users" exact component={Users} />      
  </Switch>
</BrowserRouter>

score 0 · Answer 2

Very good, so I understand you want to only show the link in the users tab, well there are several very simple solutions.

One important point to note is that you are using Router instead of using BrowserRouter which is not a good practice if you do not create the history component yourself. depends on the Router of React.

1. Using the NavLink component instead of Link

In this option the only thing necessary is the use of CSS for this method to take effect.

App.jsx

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'

import './App.css';

const NavLinks = props => (
  <nav>
    <NavLink exact strict to="/">Home</NavLink>
  </nav>
)

const Home = props => (
  <div>
    Home
  </div>
)

const Users = props => (
  <div>
    Users
  </div>
)

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <div id="app-bar">
            <NavLinks />
          </div>
          <div id="app-router">
            <Switch>
              <Route exact strict path="/" component={Home} />
              <Route exact strict path="/users" component={Users} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

When we define NavLinks it is necessary to specify the exact and strict variables so that our element works perfectly.

App.css

nav a.active {
  display: none;
}

When we use Navlinks in ReactJS , in case the path is exactly the same as the path containing the NavLink element, it adopts a class called active, which we can use to stylize when we are in the URl that represents that NavLink

2. Rendering the Links component only within the Users component

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

import './App.css';

const Links = props => (
  <nav>
    <Link to="/">Home</Link>
  </nav>
)

const Home = props => (
  <div>
    Home
  </div>
)

const Users = props => (
  <div>
        <Links />
        Users
  </div>
)

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
            <Route exact strict path="/" component={Home} />
            <Route exact strict path="/users" component={Users} />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default App;

Link component in React that does not appear in the Home component

2 answers

1. Using the NavLink component instead of Link

2. Rendering the Links component only within the Users component

I hope it will be of great help to you !!