App.jsx
import { useState } from 'react';
import './App.css';
import NewsContainer from './Components/NewsContainer';
import { Router, Routes, Route } from "react-router-dom"
function App() {
const [mode, setMode] = useState("light")
const changeMode = () => {
if (mode === "light") {
setMode("dark")
document.body.style.backgroundColor = "rgb(30 41 59)"
} else {
setMode("light")
document.body.style.backgroundColor = "white"
}
}
return (
<Router>
<div className='justify-evenly'>
<Routes>
<Route exact path = "/" element = {<NewsContainer key = "general" mode = {mode} changeMode = {changeMode} category = "general" />} />
<Route exact path='/sports' element = {<NewsContainer key = "sports" mode = {mode} changeMode = {changeMode} category = "sports" />} />
<Route exact path='/buisness' element = {<NewsContainer key = "buisness" mode = {mode} changeMode = {changeMode} category = "buisness" />} />
<Route exact path='/entertainment' element = {<NewsContainer key = "entertainment" mode = {mode} changeMode = {changeMode} category = "entertainment" />} />
<Route exact path='/health' element = {<NewsContainer key = "health" mode = {mode} changeMode = {changeMode} category = "health" />} />
</Routes>
</div>
</Router>
);
}
export default App;
Navbar.jsx
import { Link } from "react-router-dom";
function Navbar({ mode, changeMode }) {
return (
<div
className = {`${mode === "light" ? "bg-gray-100" : "dark : bg-slate-900"} `}
>
<header className = "text-gray-600 body-font">
<div className = "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<li
className = {`flex title-font font-medium list-none items-center text-${
mode === "light " ? "gray-900" : "white"
} mb-4 md:mb-0 cursor-pointer`}
>
<span
className = {`ml-3 text-xl text-${
mode === "light" ? "black" : "white"
}`}
>
<Link to = "/">Hind News</Link>
</span>
</li>
<nav className = "md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center list-none cursor-pointer">
<li
className = {`mr-5 hover:text-${
mode === "light" ? "dark : gray-900" : "white"
}`}
>
<Link to = "/sport"> Sports </Link>
</li>
<li
className = {`mr-5 hover:text-${
mode === "light" ? "dark : gray-900" : "white"
}`}
>
<Link to = "/buisness">Buisness </Link>
</li>
<li
className = {`mr-5 hover:text-${
mode === "light" ? " dark:gray-900" : "white"
}`}
>
<Link to = "/entertainment">Entertainment </Link>
</li>
<li
className = {`mr-5 hover:text-${
mode === "light" ? "dark : gray-900" : "white"
}`}
>
<Link to = "/health">Health </Link>
</li>
</nav>
<input
type = "text"
className = "inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0"
/>
<button className = "inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Search
<svg
fill = "none"
stroke = "currentColor"
strokeLinecap = "round"
strokeLinejoin = "round"
strokeWidth = "2"
className = "w-4 h-4 ml-1"
viewBox = "0 0 24 24"
>
<path d = "M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<div className = "flex justify-center">
<div className = "flex justify-center">
<div className = "form-check form-switch">
<input
className = "form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm ml-60"
type = "checkbox"
role = "switch"
id = "flexSwitchCheckDefault"
onClick = {changeMode}
/>
<label
className = {`form-check-label inline-block text-${
mode === "light" ? "gray-900" : "white"
} `}
htmlFor = "flexSwitchCheckDefault"
>
{" "}
Switch Mode
</label>
</div>
</div>
</div>
</div>
</header>
</div>
);
}
export default Navbar;
Ошибка на консоли
Uncaught TypeError: Не удается прочитать свойства неопределенного (чтение 'путь')
Вышеупомянутая ошибка произошла в компоненте
<Router>
:at Router (http://localhost:3000/static/js/bundle.js:39615:15) at App (http://localhost:3000/static/js/bundle.js:33:74)
Рассмотрите возможность добавления границы ошибки в дерево, чтобы настроить ошибку обращение с поведением. Посетите https://reactjs.org/link/error-boundaries, чтобы узнать больше о границах ошибок.
версия 6.4 реакции-маршрутизатора @JonathanWieben
у тебя там опечатка.
<Link to = "/sport"> Sports </Link>
когда в маршруте пишет спорт
<Route exact path='/sports' element = {<NewsContainer key = "sports" mode = {mode} changeMode = {changeMode} category = "sports" />} />
Надеюсь это решит
не сработало, братан @Tomer_Ra
Вероятно, вы захотите использовать BrowserRouter вместо Router, который является оболочкой Router
.
согласен, просто сделайте BrowserRouter как Router в операторе импорта.
Вы импортируете и визуализируете низкоуровневый компонент Router
и не передаете ни одного из необходимых реквизитов.
import { Router, Routes, Route } from "react-router-dom"
declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial<Location> | string; // <-- missing navigationType?: NavigationType; navigator: Navigator; // <-- missing static?: boolean; }
Не хватает реквизита location
и navigator
. Ошибка возникает именно из-за отсутствия реквизита location
, он не определен, поэтому код не может получить доступ к pathname
из `undefined.
Вам почти никогда не нужно рендерить Router
себя вручную. Вместо этого вы должны визуализировать один из маршрутизаторов высокого уровня (например, BrowserRouter
, HashRouter
и т. д.), который создает и поддерживает ссылку на историю и передает эти необходимые реквизиты низкоуровневому компоненту Router
.
Пример:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
Не могли бы вы поделиться, какую версию
react-router
вы используете?