- 首页
- 前端开发
- React js路由器更改url但不加载页面
React js路由器更改url但不加载页面
[英] React js Router changes url but not loading page
本文介绍了React js路由器更改url但不加载页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个大问题，我正在使用 react BrowserRouter、Link 和 Switch 来管理我的网站路由，我的问题是当我点击一个链接时，它会在 url 上发生变化但不在视图中，但是当我刷新页面时它有效.
这是我的 Index.js 页面:
从'react'导入React；从 'react-dom' 导入 ReactDOM；从'react-router-dom'导入{ BrowserRouter, Route, Switch };从'./Home'导入首页；从'./Header'导入标题；从 './Footer' 导入页脚；从'./Resume'导入简历；import * as serviceWorker from './serviceWorker';ReactDOM.render(, document.getElementById('header'));ReactDOM.render((<浏览器路由器><开关><路由精确路径="/" component={Home}/><Route path="/resume" component={Resume}/></开关></BrowserRouter>), document.getElementById('root'));ReactDOM.render(<Footer/>, document.getElementById('footer'));serviceWorker.unregister();
这是 Header.js 代码:
import React, { Component } from 'react';从'./img/moi2.jpg'导入bImg；从'react-router-dom'导入{ BrowserRouter，链接}；/*** Composant définissant l'entête de la page(Navigation et la photo de début)* 链接 est utilisé à la place de <a>倾泻路线.* @作者* @date 2018 年 11 月 15 日*/类头扩展组件{使成为(){返回(<div><浏览器路由器><nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div className="容器"><Link className="navbar-brand" to="/">Iam Root</Link><button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"数据目标="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"aria-label="切换导航">菜单<i className="fas fa-bars"></i><div className="collapse navbar-collapse" id="navbarResponsive"><ul className="navbar-nav ml-auto"><li className="nav-item"><Link to="/resume">Mon CV</Link><li className="nav-item"><Link to="/tutoriels">Tutoriels</Link><li className="nav-item"><Link to="/contact">Contactez-moi</Link>
</nav></BrowserRouter><header className="masthead" style={{backgroundImage: `url(${bImg})`}}><div className="overlay"></div><div className="容器"><div className="row"><div className="col-lg-8 col-md-10 mx-auto"><div className="站点标题"><h1 style={{ opacity: 0.4}}>prenom nom</h1><span className="副标题">函数</span>
</标题>
);}}导出默认标题；
这是我的 Resume.js 代码:
import React, { Component } from 'react';类简历扩展组件{使成为(){返回(<div>你好 x 的简历
);}}导出默认简历；
Home 和 Footer 就像 Resume.js 一样简单
非常感谢您的帮助.
解决方案
你只需要在你的组件中有 on BrowserRouter 这样所有的路由都知道他们订阅的是哪个路由，同时链接正在更新数据正确的路由器提供商.
在您的情况下，Header 和 Root 元素由不同的 BrowserRouter 包装，因此 Header 组件中的 Links 更新封闭的 Router Provider，index.js 文件中的其他 Routes 没有订阅，因此无法正常工作.
因此，您无需使用 ReactDOM.render 来渲染不同的元素，而是可以像
从'react'导入React；从 'react-dom' 导入 ReactDOM；从'react-router-dom'导入{ BrowserRouter, Route, Switch };从'./Home'导入首页；从'./Header'导入标题；从 './Footer' 导入页脚；从'./Resume'导入恢复；import * as serviceWorker from './serviceWorker';ReactDOM.render((<浏览器路由器><div><div id="标题"><路由组件={Header}/><开关><路由精确路径="/" component={Home}/><Route path="/resume" component={Resume}/></开关><div id="页脚"><路由组件={Footer}/>
</BrowserRouter>), document.getElementById('root'));serviceWorker.unregister();
和 Header.js
import React, { Component } from 'react';从'./img/moi2.jpg'导入bImg；从'react-router-dom'导入{ BrowserRouter，链接}；/*** Composant définissant l'entête de la page(Navigation et la photo de début)* 链接 est utilisé à la place de <a>倾吐路线.* @作者* @date 2018 年 11 月 15 日*/类头扩展组件{使成为(){返回(<div><nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div className="容器"><Link className="navbar-brand" to="/">Iam Root</Link><button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"数据目标="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"aria-label="切换导航">菜单<i className="fas fa-bars"></i><div className="collapse navbar-collapse" id="navbarResponsive"><ul className="navbar-nav ml-auto"><li className="nav-item"><Link to="/resume">Mon CV</Link><li className="nav-item"><Link to="/tutoriels">Tutoriels</Link><li className="nav-item"><Link to="/contact">Contactez-moi</Link></nav><header className="masthead" style={{backgroundImage: `url(${bImg})`}}><div className="overlay"></div><div className="容器"><div className="row"><div className="col-lg-8 col-md-10 mx-auto"><div className="站点标题"><h1 style={{ opacity: 0.4}}>prenom nom</h1><span className="副标题">函数</span>
</标题>
);}}导出默认标题；
进行此更改后，您的应用应该可以正常工作
I have a big problem, I'm using react BrowserRouter, Link and Switch to manage my website routing, my problem is that when I click on a link it changes on url but not in view, however when I refresh the page it works.
This is my Index.js page :
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Header from './Header';
import Footer from './Footer';
import Resume from './Resume';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render((
<BrowserRouter>
<Switch>
<Route exact path ="/" component={Home} />
<Route path ="/resume" component={Resume} />
</Switch>
</BrowserRouter>
), document.getElementById('root'));
ReactDOM.render(<Footer/>, document.getElementById('footer'));
serviceWorker.unregister();
This is Header.js code:
import React, { Component } from 'react';
import bImg from './img/moi2.jpg';
import { BrowserRouter, Link } from 'react-router-dom';
/**
* Composant définissant l'entête de la page (Navigation et la photo de début)
* Link est utilisé à la place de <a> pour la gestion des routes.
* @Author
* @date 15th november 2018
*/
class Header extends Component{
render(){
return(
<div>
<BrowserRouter>
<nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div className="container">
<Link className="navbar-brand" to="/">Iam Root</Link>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i className="fas fa-bars"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/resume">Mon CV</Link>
</li>
<li className="nav-item">
<Link to="/tutoriels">Tutoriels</Link>
</li>
<li className="nav-item">
<Link to="/contact">Contactez-moi</Link>
</li>
</ul>
</div>
</div>
</nav>
</BrowserRouter>
<header className="masthead" style={{backgroundImage: `url(${bImg})`}}>
<div className="overlay"></div>
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-10 mx-auto">
<div className="site-heading">
<h1 style={{ opacity: 0.4}}>prenom nom</h1>
<span className="subheading">
Fonction
</span>
</div>
</div>
</div>
</div>
</header>
</div>
);
}
}
export default Header;
This is my Resume.js code :
import React, { Component } from 'react';
class Resume extends Component{
render(){
return(
<div>
Hello x's Resume
</div>
);
}
}
export default Resume;
Home and Footer are simple like Resume.js
Thank you a lot in advance for your help.
解决方案
You only need to have on BrowserRouter in your component so that all Routes are aware of which Router they are subscribing to and at the same time Links are updating data in the correct Router Provider.
In your case, Header and Root elements are wrapped by Different BrowserRouter and hence the Links in Header component update the enclosing Router Provider, which the other Routes in index.js file aren't subscribing to and hence it doesn't work correctly.
So instead of rendering different elements with ReactDOM.render, you can do it simply like
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Header from './Header';
import Footer from './Footer';
import Resume from './Resume';
import * as serviceWorker from './serviceWorker';
ReactDOM.render((
<BrowserRouter>
<div>
<div id="header">
<Route component={Header} />
</div>
<Switch>
<Route exact path ="/" component={Home} />
<Route path ="/resume" component={Resume} />
</Switch>
<div id="footer">
<Route component={Footer} />
</div>
</div>
</BrowserRouter>
), document.getElementById('root'));
serviceWorker.unregister();
And Header.js
import React, { Component } from 'react';
import bImg from './img/moi2.jpg';
import { BrowserRouter, Link } from 'react-router-dom';
/**
* Composant définissant l'entête de la page (Navigation et la photo de début)
* Link est utilisé à la place de <a> pour la gestion des routes.
* @Author
* @date 15th november 2018
*/
class Header extends Component{
render(){
return(
<div>
<nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div className="container">
<Link className="navbar-brand" to="/">Iam Root</Link>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i className="fas fa-bars"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/resume">Mon CV</Link>
</li>
<li className="nav-item">
<Link to="/tutoriels">Tutoriels</Link>
</li>
<li className="nav-item">
<Link to="/contact">Contactez-moi</Link>
</li>
</ul>
</div>
</div>
</nav>
<header className="masthead" style={{backgroundImage: `url(${bImg})`}}>
<div className="overlay"></div>
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-10 mx-auto">
<div className="site-heading">
<h1 style={{ opacity: 0.4}}>prenom nom</h1>
<span className="subheading">
Fonction
</span>
</div>
</div>
</div>
</div>
</header>
</div>
);
}
}
export default Header;
Once you make this change, your App should work as desired
这篇关于React js路由器更改url但不加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
