URLを更新しているがページを更新していないルーターV5に反応する
Aug 19 2020
react routerはビューを更新していませんが、URLを変更しています。
Navbar.js:
import React from "react";
import logo from "../Assets/imgs/Logo/WHITELOGOkatman 1.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
class Navbar extends React.Component {
render() {
return (
<div className="header">
<img className="logo" src={logo} alt="logo" />
<Router>
<nav>
<ul className="nav_links">
<Link to="/">
<li>Home</li>
</Link>
<Link to="/process">
<li>Process</li>
</Link>
<Link to="/career">
<li>Career</li>
</Link>
<Link to="/about">
<li>About</li>
</Link>
</ul>
</nav>
</Router>
</div>
);
}
}
export default Navbar;
そしてこれは私のApp.jsです
import React from "react";
import "./App.css";
import "./Components/Styles/style.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./Components/Navbar";
import About from "./Components/About";
import Home from "./Components/Home";
import Career from "./Components/Career";
import Footer from "./Components/Footer";
import notFoundPage from "./Components/404";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Navbar />
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
</Switch>
</Router>
<Footer />
</div>
);
}
export default App;
私が試したこと:
- withRouterを使用してルーター内でレンダリングしているすべてのコンポーネントをエクスポートしようとしました。それでもページはリロードされませんでした。
- ルーターコンポーネントをトップレベルのコンポーネントにしようとしましたが、うまくいきませんでした。
- liアイテムをリンクとして作成してみましたが、うまくいきませんでした。
- リンクタグの上にスイッチを含めたり、ルータータグからスイッチを削除したりするなどの解決策を試しましたが、それでも何も機能しませんでした。
- また、ルートの順番を入れ替えて、ルートの最後に家を作ってみました。まだ何もありません。
回答
MosiaThabo Aug 19 2020 at 16:50
次の2つを試してください。
- まず、ルートの順序が次のとおりであることを確認します。
<Switch>
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
<Route exact path="/" component={Home} />
</Switch>
- 削除
<Router>
あなたの内側<Nav>
の内側とラップのすべて<App>
と<Router>
...このように:
function App() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/career" component={Career} />
<Route path="/notfound" component={notFoundPage} />
</Switch>
<Footer />
</div>
</Router>
);
}
私の経験では、<Router>
子供が1人しかいないことに気付いたことは注目に値します。だからあなたの場合は<Router>
2回使用しました。
また<Router>
、index.jsファイルにあなたを置くことによってそれをさらに単純化したいと思うかもしれません:
ReactDOM.render(
<Router>
<App />
</Router>,
containerElement
);