ログインページとサインアップページへのリンクを含むナビゲーションバーをレンダリングしたいのですが、クリックするたびにURLが希望どおりに変更されますが、それぞれのコンポーネントはレンダリングされません。これが私のコードです:
App.js
import React, { Component } from 'react';
import NavBar from './components/NavBar/NavBar';
import {BrowserRouter as Router,Route,withRouter} from "react-router-dom";
import Login from './components/Login';
import SignUp from './components/SignUp';
import Landing from './components/Landing';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<NavBar />
<Route exact path="/" component={withRouter(Landing)} />
<div className="container">
<Route exact path="/login" component={withRouter(Login)} />
<Route exact path="/signup" component={withRouter(SignUp)} />
</div>
</div>
</Router>
);
}
}
export default App;
NavBar.js
import React,{Component} from "react";
import {BrowserRouter as Router,withRouter,Link} from "react-router-dom";
import './NavBar.css'
class NavBar extends Component {
render() {
return (
<Router>
<header className='navbar'>
<nav className='navbar_navigation'>
<div />
<div className='navbar_logo'>
<Link to='/'>Home</Link>
</div>
<div className='navbar_nav-items'>
<ul>
<li><Link to="/signup" className="nav-link">Sign up</Link></li>
<li><Link to="/login" className="nav-link">Log In</Link></li>
<li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
</ul>
</div>
</nav>
</header>
</Router>
);
}
}
export default withRouter(NavBar);
Landing、Login、Signupは基本的に、h2でテキストをレンダリングするコンポーネントです。これらが正常にレンダリングされるかどうかを確認したいからです。また、それぞれのURL(/ loginまたは/ signup)に直接アクセスしても、変更は見られず、これらのURLでレンダリングされるのはナビゲーションバーだけです。スイッチも追加してみましたが、何も変わらないようです。
ここでの問題は、Navbarコンポーネントがそれ自体でルーターを使用しているため、リンクコンポーネントがRouter
ルートをレンダリングする外部コンポーネントと通信できないことです。ルーターコンポーネントインスタンスを1つだけ使用するようにしてください。
NavbarコンポーネントはRouter
インスタンスを必要としません
class NavBar extends Component {
render() {
return (
<header className='navbar'>
<nav className='navbar_navigation'>
<div />
<div className='navbar_logo'>
<Link to='/'>Home</Link>
</div>
<div className='navbar_nav-items'>
<ul>
<li><Link to="/signup" className="nav-link">Sign up</Link></li>
<li><Link to="/login" className="nav-link">Log In</Link></li>
<li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
</ul>
</div>
</nav>
</header>
);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加