react实现一个组件一个页面，路由跳转到一个全新的页面，当前页面内容清空

思路:
要在整个页面上做文章，就会想到根组件，
然后在根组件上进行路由匹配就可以实现整个页面的变化

安装 react-router-dom: npm i react-router-dom -S

// App.js
const app = ()=>{
return <h1>H1</h1>
}
export default app;

// App2.js
const app = ()=>{
return <h1>H2</h1>
}
export default app;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import App2 from './App2'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
let p = {
name: 'hh',
age: 18
}
ReactDOM.render(
(<BrowserRouter>
<Link to="/"/>
<Link to="/app"/>
<Switch>
<Route path="/app">
<App2/>
</Route>
<Route path="/">
<App />
</Route>
</Switch>
</BrowserRouter>),
document.getElementById('root')
);
// 访问http://localhost:3000/app显示H2
// http://localhost:3000/显示H1
// 因为路由匹配默认是模糊的<Route path="/">放前面会优先被匹配，所以不管怎么输入url都会显示H1
// 可以在里面添加exact属性精确匹配<Route exact path="/">
// 但是一般情况下能不用exact就不用，有时候会导致二级路由无法匹配

// App.js
// 子组件也可以通过link改变url然后更新页面整体
import {
Link } from 'react-router-dom'
const app = ()=>{
return (
<Link to="/app">
<h1>H1</h1>
</Link>
)
}
export default app;
// 点击H1，然后url变成app，显示H2

最后

以上就是包容黄蜂为你收集整理的react实现一个组件一个页面，路由跳转到一个全新的页面，当前页面内容清空的全部内容，希望文章能够帮你解决react实现一个组件一个页面，路由跳转到一个全新的页面，当前页面内容清空所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。