CODEWITHSUNDEEP
reactjsroutes
no1imwr
no1imwr

Reputation: 3

Routing to another page React Router

const NavigationBar = ({setToken}) => {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState([])

  useEffect(() => {
    setLoading(true)
    axios({
      method: 'GET',
      url: 'https://fakestoreapi.com/products/categories',
    }).then(response => {
      console.log(response.data);
      setData(response.data)
    }).catch(error => {
      console.log(error);
    }).finally(()=> setLoading(false))
  }, [])

  return (     
    <div className="navigation-bar">
      {loading && (
        <div>
          <h3>Loading...</h3>
        </div>
      )}

      <h2>Exet market</h2>

      {data.map((category) => (
        <nav key={category.id} className='navbar-menu ul'>
          <ul>{category}</ul>
        </nav>
      ))}     
    </div>
  )
}

export default NavigationBar;

I get the data from the server and display it in the header navigation menu. Actually, <ul>{category}</ul> is a renderer. What is the optimal way to navigate to the desired page in this situation? For example, I have 4 pages that are inside {category}.

Upvotes: 0

Views: 46

Answers (1)

Asrin Utku
Asrin Utku

Reputation: 74

You can use Link from react-router. With Link property you have accessible navigation in your application , here info all you need . And also you can have a look at this link. It may be more useful for your navigation structure.

Upvotes: 1

Related Questions