Ссылка "react-router-dom" не действует как ссылки

#reactjs #react-router #react-router-dom

Вопрос:

У меня Link в моем Footer.js, и по какой-то причине он не работает как ссылки в браузере. Например, не показывать указатель на ссылку и т. Д. У меня есть несколько ссылок в моем Nav компоненте. Все они работают нормально, но если я помещу a Link в любой другой компонент, он не сработает. Я пробовал использовать BrowserRouter вместо HashRouter и NavLink вместо Link, , но проблема все еще существует. Хотя это кажется безрассудной ошибкой.

На данный момент у меня есть этот статичный веб-сайт. Вот почему я не завернул свои компоненты в Switch и Route.

Footer.js

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

const Footer = () => {
    return (
        <div>
             <h1>Create group!</h1>
             <Link to="/" className="rounded">Get Started</Link>
        </div>
    )
}
export default Footer

App.js:

 import Footer from './Footer'
import { HashRouter } from 'react-router-dom'

const App = () => {
  return (
   
    <HashRouter basename="/">
        <Nav />
        <Home />
        <About />
        <HowItWorks />
        <GroupCarousel />
        <EventCarousel />
        <Footer />
    </HashRouter>
  );
}

export default App;

index.js:

 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Любая помощь будет признательна.

1. это работает? Например, когда вы нажимаете на нее, она переходит на другую страницу?

2. @iagowp Я не определил никакого пути, поэтому он никуда не денется, но он не превращается в Link то, что не показывает указатель на курсоре.

3. Вы проверили html-код? Может быть, это просто проблема css

4. @iagowp Да, я проверил там HTML. Это рендеринг <a> . Я также пробовал применять стили CSS, но все равно проблема существует. У меня есть Links Nav компонент, и все работает нормально. И кроме этого нигде в компоненте они не работают.

5. Ваша проблема в значительной степени похожа на проблему css, а не на проблему с маршрутизатором реакции. Проверьте стили, применяемые к обоим компонентам

Ответ №1:

Вы должны определить свои маршруты внутри HashRouter , используя Switch и Route теги, которые будут использоваться внутри приложения. В противном случае ваши маршруты не будут работать. Попробуйте выполнить следующий код, и он будет работать так, как ожидалось.

Footer.js

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

const Footer = () => {
    return (
        <div>
             <h1>Create group!</h1>
             <Link to="/" className="rounded">Get Started</Link>
        </div>
    )
}
export default Footer

App.js

 import Footer from './Footer'
import { HashRouter } from 'react-router-dom'

const App = () => {
  return (
   
    <HashRouter basename="/">
        <Switch>
            <Route path="/" exact component={Home} />
        </Switch>
    </HashRouter>
  );
}

export default App;

Home.js

 import React from 'react'
...

const Home = () => {
    return (
        <>
            <Nav />
            <Home />
            <About />
            <HowItWorks />
            <GroupCarousel />
            <EventCarousel />
            <Footer />
        </>
    ):
}

export default Home;