- 首页
- 前端开发
- ReactJS Bootstrap Navbar 和 Routing 不能一起工作
ReactJS Bootstrap Navbar 和 Routing 不能一起工作
[英] ReactJS Bootstrap Navbar and Routing not working together
本文介绍了ReactJS Bootstrap Navbar 和 Routing 不能一起工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 ReactJS 创建一个简单的 Web 应用程序，并且我想使用 React-Bootstrap 提供的 Navbar.
我创建了一个 Navigation.js 文件，其中包含一个 Navigation 类来将 Navbar 和路由与 App.js 分开 文件.但是，这两个部分似乎都不起作用.当我加载页面时，它只是空的，没有导航栏.谁能发现错误?
Navigation.js:
import React, { Component } from 'react';import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';从'react-router-dom'导入{开关，路由}；从'./Page'导入{主页}；类导航扩展组件{使成为() {返回 (<div><div><导航栏><Navbar.Brand href="/">React-Bootstrap</Navbar.Brand><Navbar.Collapse><Nav className="mr-auto"><NavItem eventkey={1} href="/"><Nav.Link href="/">首页</Nav.Link></NavItem></导航><表格内联><FormControl type="text" placeholder="Search" className="mr-sm-2"/><Button variant="outline-success">搜索</Button></表格></Navbar.Collapse></导航栏>
<div><开关><路由精确路径='/' component={Home}/><路由渲染={function(){return <p>Not found</p>}}/></开关>
);}}导出默认导航；
App.js:
import React, { Component } from 'react';从'./components/routing/Navigation'导入导航；类 App 扩展组件 {使成为() {返回 (<div id="应用程序"><导航/>
);}}导出默认应用程序；
我已经尝试使用包含来自 react-router-bootstrap 的 LinkContainer 的 NavItem，这导致了相同的结果.
为了完整性，Page.js:
import React, { Component } from 'react';从'react-router-dom'导入{链接}；export const Page = ({ title }) =>(<div className="应用程序"><div className="App-header"><h2>{title}</h2>
<p className="App-intro">这是{title}页面.</p><p><链接到="/">主页</链接></p><p><Link to="/about">关于</Link></p><p><Link to="/settings">设置</Link></p>
);export const About = (props) =>(<页面标题="关于"/>);导出常量设置=(道具)=>(<页面标题="设置"/>);export const Home = (props) =>(<页面标题="首页"/>);
解决方案
首先，在您的代码片段中，您似乎没有将代码包装在 Router 中，因此您应该确保您在 App 或 ReactDOM.render 中执行此操作:
import { BrowserRouter } from 'react-router-dom';ReactDOM.render(<浏览器路由器><应用程序/></BrowserRouter>,根元素);
接下来，您的具体问题是您正在渲染 react-bootstrap 的 Nav.Link 而不是 react-router 的 Link 组件，因此路由器没有接收您的路线变化.幸运的是，react-bootstrap 在它的大部分组件中都提供了一个渲染属性来指定如果你不想要默认的组件或元素，你想要渲染哪个组件或元素.切换到这样的:
import { Switch, Route, Link } from 'react-router-dom';类导航扩展组件{使成为() {返回 (<div><div><导航栏><Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand><Navbar.Collapse><Nav className="mr-auto"><NavItem eventkey={1} href="/"><Nav.Link as={Link} to="/" >Home</Nav.Link></NavItem></导航><表格内联><FormControl type="text" placeholder="Search" className="mr-sm-2"/><Button variant="outline-success">搜索</Button></表格></Navbar.Collapse></导航栏><div><开关><路由精确路径='/' component={Home}/><路由渲染={function(){return <p>Not found</p>}}/></开关>
);}}
I am trying to create a simple Webapp using ReactJS, and I wanted to use the Navbar provided by React-Bootstrap.
I created a Navigation.js file containing a class Navigation to separate the Navbar and the Routing from the App.js file. However, both parts do not seem to work. When I load the page, it is just empty, there is no Navbar. Can anyone spot a mistake?
Navigation.js:
import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link href="/">Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}
export default Navigation;
App.js:
import React, { Component } from 'react';
import Navigation from './components/routing/Navigation';
class App extends Component {
render() {
return (
<div id="App">
<Navigation />
</div>
);
}
}
export default App;
I tried using a NavItem containing a LinkContainer from react-router-bootstrap already, which led to the same result.
Just for completeness, Page.js:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export const Page = ({ title }) => (
<div className="App">
<div className="App-header">
<h2>{title}</h2>
</div>
<p className="App-intro">
This is the {title} page.
</p>
<p>
<Link to="/">Home</Link>
</p>
<p>
<Link to="/about">About</Link>
</p>
<p>
<Link to="/settings">Settings</Link>
</p>
</div>
);
export const About = (props) => (
<Page title="About"/>
);
export const Settings = (props) => (
<Page title="Settings"/>
);
export const Home = (props) => (
<Page title="Home"/>
);
解决方案
First of all, in your snippets it doesn't seem like you're wrapping your code in a Router, so you should make sure that you're doing that inside App or in ReactDOM.render:
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
Next, your specific problem is that you're rendering react-bootstrap's Nav.Link instead of react-router's Link component, so the router is not picking up your route changes. Fortunately, react-bootstrap provides a render prop in most of its components to specify which component or element you want to render if you don't want the default. Switch to something like this:
import { Switch, Route, Link } from 'react-router-dom';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}
这篇关于ReactJS Bootstrap Navbar 和 Routing 不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
