我目前正在使用 react-router-dom
在我的网络应用程序中创建导航。
我的index.js和App.js看起来像:
Index.js
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById('root')
);
App.js
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Route exact path ='/' component={Home} />
<Route path ='/container' component={Container} />
<Route path ='/profile' component={ProfilePage} />
</div>
</BrowserRouter>
);
}
}
我的想法是,如果 Home
包含标题和侧边栏,它也会为其他组件保留它,例如 Container
和 ProfilePage
。
我的Home
的渲染如下:
render() {
return (
<div>
<Header />
<div className="App">
<Sidebar />
<Container className="container-comp" />
{this.renderLoggingOutput()}
</div>
</div>
);
}
但是当我链接到 /profile
时,它只显示 ProfilePage
组件,没有标题和侧边栏。
有什么帮助吗?
最佳答案
将标题放在路由之外:
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Header /> <-------- place here or outside the routes at a minimum
<div>
<Route exact path ='/' component={Home} />
<Route path ='/container' component={Container} />
<Route path ='/profile' component={ProfilePage} />
</div>
</BrowserRouter>
);
}
}
我的一个应用程序有类似的结构。 路线如下所示:
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route exact path='/' component={Dashboard}/>
<Route path='/character/:id' component={CharacterDetails}/>
<Route path='/encounter/:id' component={Encounter}/>
.........
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
关于javascript - 使用react-router-dom在react中全局使用Header,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57717192/