- 首页
- 其他开发
- 不使用 react-router-dom 渲染的路由
不使用 react-router-dom 渲染的路由
[英] Routes not rendering with react-router-dom
本文介绍了不使用 react-router-dom 渲染的路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我网站的进入场景是
/->/家->/关于->/项目
当连接到site.com/时，有欢迎信息和进入按钮.
点击进入"按钮后，将显示/home.
和 /home 有导航栏，它有两个组件 /about 和 /project
因此，用户可以单击导航栏菜单来导航另一个页面.
/about 工作正常，但/project 不起作用.它显示空白页.
[App.js]
import React, { Component } from 'react';导入'./App.css';import { BrowserRouter as Router, Route } from 'react-router-dom';从'./components/Login'导入登录；从'./components/Home'导入Home；从'./components/Project'导入项目；类 App 扩展组件 {使成为() {返回 (<路由器><div className="应用程序"><路由精确路径="/" component={Login}/><Route path="/home" component={Home}/>
</路由器>);}}导出默认应用程序；
[Home.js]
import React, { Component } from 'react';从'../Header'导入标题；从../项目"导入项目；从../关于"导入关于；导入 'bootstrap/dist/css/bootstrap.min.css';从'react-router-dom' 导入 { BrowserRouter, Route }进口 {导航栏，导航栏品牌，导航，导航项，NavLink } 来自 'reactstrap';类索引扩展组件{使成为() {返回 (<浏览器路由器><div className="home"><标题/><Route path="/home" component={About}/><Route path="/project" component={Project}/>
</BrowserRouter>);}}导出默认索引；
[Header.js]
import React, { Component } from 'react';进口 {导航栏，导航栏品牌，导航，导航项，NavLink } 来自 'reactstrap';类索引扩展组件{使成为() {返回 (<div className="navbar_fixed"><Navbar color="light" light expand="md"><NavbarBrand href="/">隐藏</NavbarBrand><Nav className="ml-auto" 导航栏><导航项目><NavLink href="/home">关于</NavLink></NavItem><导航项目><NavLink href="/project">项目</NavLink></NavItem></导航></导航栏>
);}}导出默认索引；
[关于.js]
import React, { Component } from 'react';导入'./index.css';导出默认类索引扩展组件{使成为() {返回 (<div>About.js 的一些代码
);}}
[Project.js]
import React, { Component } from 'react';导入'./index.css';导出默认类索引扩展组件{使成为() {返回 (<div>Project.js 的一些代码
);}}
当我进入 /home 时，它显示带有导航栏的 About.js 组件.
但是进入到/project，它什么也没显示.
我找不到错误在哪里.
我该如何修复它?
谢谢.
<小时>
[已解决]
将代码更改为 Shubham Khatri 的代码并将精确添加到 <Route exact path="/home" component={About}/>
解决方案
您的 Header 组件未接收 react-router 道具，因此其导航无法正常工作，您可以将 Header 编写为默认路由.此外，您只需要在应用顶部使用 BrowserRouter 一次
还有嵌套路由，需要指定相对路由
class index extends Component {使成为() {const { 匹配 } = this.props;返回 (<div className="home"><路由组件={Header}/><开关><路由路径={`${match.path}/project`} component={Project}/><Route path="/home" component={About}/></开关>
);}}
你的 Header.js 将是
import React, { Component } from 'react';进口 {导航栏，导航栏品牌，导航，导航项，NavLink } 来自 'reactstrap';类索引扩展组件{使成为() {const { match } = this.props;返回 (<div className="navbar_fixed"><Navbar color="light" light expand="md"><NavbarBrand href="/">隐藏</NavbarBrand><Nav className="ml-auto" 导航栏><导航项目><NavLink href="/home">关于</NavLink></NavItem><导航项目><NavLink href={`${match.url}/project`}>Project</NavLink></NavItem></导航></导航栏>);}}导出默认索引；
My site's entering scenario is
/ -> /home
-> /about
-> /project
When connect to site.com/, there is welcome message and enter button.
After click the 'enter' button, /home will be show.
And /home has Navbar that has two components /about and /project
So, user can click the navbar menu to navigate another page.
/about is works properly, but /project doesn't work. It displayed blank page.
[App.js]
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
import Project from './components/Project';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
</div>
</Router>
);
}
}
export default App;
[Home.js]
import React, { Component } from 'react';
import Header from '../Header';
import Project from '../Project';
import About from '../About';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route } from 'react-router-dom'
import {
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink } from 'reactstrap';
class index extends Component {
render() {
return (
<BrowserRouter>
<div className="home">
<Header />
<Route path="/home" component={About}/>
<Route path="/project" component={Project}/>
</div>
</BrowserRouter>
);
}
}
export default index;
[Header.js]
import React, { Component } from 'react';
import {
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink } from 'reactstrap';
class index extends Component {
render() {
return (
<div className="navbar_fixed">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Hide</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/home">About</NavLink>
</NavItem>
<NavItem>
<NavLink href="/project">Project</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
}
}
export default index;
[About.js]
import React, { Component } from 'react';
import './index.css';
export default class index extends Component {
render() {
return (
<div>
Some codes for About.js
</div>
);
}
}
[Project.js]
import React, { Component } from 'react';
import './index.css';
export default class index extends Component {
render() {
return (
<div>
Some codes for Project.js
</div>
);
}
}
When I entered to /home, It shows About.js component with navbar.
But entered to /project, It show nothing.
I can't find where is the error.
How can I fixed it?
Thanks.
[SOLVED]
Change the code to Shubham Khatri's code and add exact to <Route exact path="/home" component={About}/>
解决方案
Your Header component isn't receiving the react-router props and hence its navigation doesn't work properly, You could write Header as a default Route. Also you need to use BrowserRouter only once at the top of your App
Also with nested Route, you need to specify the relative routes
class index extends Component {
render() {
const { match } = this.props;
return (
<div className="home">
<Route component={Header} />
<Switch>
<Route path={`${match.path}/project`} component={Project}/>
<Route path="/home" component={About}/>
</Switch>
</div>
);
}
}
and your Header.js will be
import React, { Component } from 'react';
import {
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink } from 'reactstrap';
class index extends Component {
render() {
const { match } = this.props;
return (
<div className="navbar_fixed">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Hide</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/home">About</NavLink>
</NavItem>
<NavItem>
<NavLink href={`${match.url}/project`}>Project</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
}
}
export default index;
这篇关于不使用 react-router-dom 渲染的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
