我在渲染组件时遇到问题。我有三个JS文件 1- App.js
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import './App.css';
import Login from './components/Login'
import Register from './components/Register'
import ForgotPassword from './components/ForgotPassword'
function App() {
return (
<div className="App">
<BrowserRouter>
<Route exact path='/' component={Login} />
<Route path='/register' component={Register} />
<Route path='/forgot-password' component={ForgotPassword} />
</BrowserRouter>
</div>
);
}
export default App;
此文件加载“登录”组件。在“登录”组件中，我检查用户是否通过Cookie登录？如果用户已登录，它将加载“主要”组件。否则，它将加载“登录”组件。 2- Login.js
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import Main from './Main'
import { setCookie, getCookie } from '../utils.js';
class Login extends Component {
constructor(){
super()
var token = getCookie('access_token')
console.log(token)
if (token !== '') {
const user = JSON.parse(getCookie('user'))
console.log(user)
this.state = {
email: '',
password: '',
showComponent: false,
isLoggedIn: true,
user: user
}
}else{
this.state = {
email: '',
password: '',
showComponent: false,
isLoggedIn: false,
user: null
}
}
}
changeHandler = e => {
this.setState({[e.target.name]: e.target.value})
}
submitHandler = e => {
e.preventDefault()
const headers = {
'Content-Type': 'application/json',
}
axios.post(
'http://localhost/guest-guide-book-api/public/api/login', this.state,
{ headers: headers }
)
.then(response => {
var user = response.data.user
this.setState({
user: user,
showComponent: true,
email: '',
password: ''})
var token = response.data.access_token
setCookie('access_token', token, 7)
setCookie('user', JSON.stringify(user), 7)
})
.catch((error) => {
console.log('Error ' + error);
});
}
render(){
const { email, password, user } = this.state
return (
<div>
{this.state.showComponent || this.state.isLoggedIn ?
<Main> {user} </Main> :
<div>
<form className="user" onSubmit={this.submitHandler}>
<input type="email" name="email" value={email} onChange={this.changeHandler} className="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address..." />
<input type="password" name="password" value={password} onChange={this.changeHandler} className="form-control form-control-user" id="exampleInputPassword" placeholder="Password" />
<input type="checkbox" className="custom-control-input" id="customCheck" />
<label className="custom-control-label" htmlFor="customCheck">Remember Me</label>
<button type="submit" className="btn btn-primary btn-user btn-block">
Login
</button>
</form>
<Link className="small" to="/forgot-password">Forgot Password?</Link>
<Link className="small" to="/register">Create an Account!</Link>
</div>
}
</div>
)
}
}
export default Login
成功登录后，服务器发送用户信息和访问令牌，并加载“主要”组件。真正的问题带有“主要”组件。 “主要”组件包含所有溃败。这些路由仅适用于登录用户。 “主要”组件包含“页眉”，“页脚”和“ LoggedInSidebar”组件，这些组件在下一页通用。登录后，页面结构是“页眉”，“页脚”和“ LoggedInSidebar”组件保持不变。调用完每条路线后，内容区域（侧栏的第二列）将发生变化。 3- Main.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, withRouter } from 'react-router-dom'
import Header from './Header'
import MainBody from './MainBody'
import Footer from './Footer'
import AddProperty from './AddProperty'
import AccountSettings from './AccountSettings'
import Video from './Video'
import GettingStart from './GettingStart'
import Content from './Content'
import Download from './Download'
import HelpSupport from './HelpSupport'
import LoggedInSidebar from './LoggedInSidebar'
import Hook from './Hook'
import { useHistory } from "react-router-dom";
import UpdateProperty from './UpdateProperty';
class Main extends Component {
constructor(props){
super(props)
this.state = {
user: props.children[1]
}
console.log(props)
}
componentDidUpdate(){
const user = this.state.user;
//let history = useHistory();
console.log(user)
this.props.history.push({
pathname: '/index',
state: {
user: user
}
});
}
render(){
const user = this.state.user
console.log(user)
return (
<BrowserRouter>
<Header>{user} </Header>
<div className="main-wrap">
<div className="container">
<div className="row">
<LoggedInSidebar> {user} </LoggedInSidebar>
<Hook> {user} </Hook>
<Route path='/index' component={Hook} user={user} />
<Route path='/add-property' component={AddProperty} />
<Route path='/update-property' component={UpdateProperty} />
<Route path='/account-settings' component={AccountSettings} />
<Route path='/photos-videos' component={Video} />
<Route path='/getting-start' component={GettingStart} />
<Route path='/content' component={Content} />
<Route path='/download' component={Download} />
<Route path='/help-support' component={HelpSupport} />
</div>
</div>
</div>
<Footer />
</BrowserRouter>
)
}
}
export default withRouter(Main)
问题：默认情况下，我在“主要”组件中调用“挂钩”组件。现在每次，当我单击侧栏上的菜单之一时，它会加载适当的组件以及“挂钩”组件。我只希望该新组件替换Hook组件。我没有找到一种方法。所有路线链接都在“ LoggedInSidebar”中。 重要的是“挂钩”，“ LoggedInSidebar”组件从“ Main”组件获取道具。我尝试了history.push（）方法。但这没有用。 如果需要“挂钩”，“ LoggedInSidebar”组件代码，我将发布它们。这些组件包含左右列HTML。左列是侧边栏，右列是内容区域。 谢谢