[英]URL changes with React Router but component not rendering?
I'm setting up a React app to utilize React Router. 我正在设置一个React应用来利用React Router。 The URL changes when I click the Volunteers header on the left, but the component does not render. 单击左侧的“志愿者”标头后,URL会更改,但该组件不会呈现。 How should I set this up? 我应该如何设置?
I've tried to put the Routes in the SidePanel component, but I don't want the components to be rendered by React Router to be children of SidePanel, but siblings. 我试图将Routes放在SidePanel组件中,但是我不希望由React Router呈现的组件是SidePanel的子级,而是同级。
My App Component: 我的应用程序组件:
// system imports
import React from "react";
import { BrowserRouter, Route} from "react-router-dom";
// custom components
import SidePanel from "./SidePanel.js";
import VolunteerCombo from "./VolunteerCombo.js";
import RegistrantsCombo from "./RegistrantsCombo.js";
import Assignments from "./Assignments.js";
import ActionLog from "./ActionLog.js";
// css files
import "../css/App.css";
import "../css/ActivePanel.css";
import "../css/MenuPanel.css";
export class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="main_container">
<SidePanel/>
<BrowserRouter>
<Route path="/volunteers" component={VolunteerCombo}></Route>
<Route path="/registrants" component={RegistrantsCombo}></Route>
<Route path="/assignments" component={Assignments}></Route>
<Route path="/action_log" component={ActionLog}></Route>
</BrowserRouter>
</div>
);
}
}
And my SidePanel Component: 还有我的SidePanel组件:
// system imports
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
// custom components
// css files
import "../css/SidePanel.css";
class SidePanel extends React.Component {
constructor(props) {
super(props);
this.state = {
title: ""
};
}
render() {
return (
<div className="side_panel">
<BrowserRouter>
<h3 style={{paddingTop: "3%"}}>Chase Grainger</h3>
<p className="ui button">Log Out</p>
<div className="ui divider"></div>
<Link to="/volunteers">
<h4 className="side_button">Volunteers</h4>
</Link>
<h4 className="side_button">Registrants</h4>
<h4 className="side_button">Assignments Mode</h4>
<div className="ui divider"></div>
<h4 className="side_button">Action Log</h4>
</BrowserRouter>
</div>
);
}
}
export default SidePanel;
I expected my VolunteerCombo component to show up when I clicked Volunteers on the left side, but the component did not render although the URL changed. 我希望单击左侧的Volunteers时会显示我的VolunteerCombo组件,但是尽管URL更改了,但该组件没有呈现。
First of all, you need to have one BrowserRouter. 首先,您需要一个BrowserRouter。 SidePanel also needs to under BrowserRouter. SidePanel还需要在BrowserRouter下。
So overall, you need to have one more component. 因此,总的来说,您需要再增加一个组件。
<BrowserRouter>
<Route path="/" component={Layout} />
</BrowserRouter>
in Layout.js 在Layout.js中
<div>
<SidePanel />
<Switch>
...your routes
</Switch>
</div>
And use withRouter HOC for SidePanel. 并在SidePanel中使用withRouter HOC。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.