数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究React.js 路由
在 React Router v4 之前，React 中的路由是静态的，但在 v4 更新后，它变成了动态的。在单页应用程序中，我们只有一个页面 index.html 和不同的组件，这些组件根据路由显示。
在非 SPA Web 应用程序中，服务器在请求时返回一个页面。要开始路由，首先安装路由包：
npm install –save react-router-dom
一旦我们使用 create-react-app 创建项目，我们会看到只有一个 html 文件，即 index.html 和一个名为 App 的组件
现在，我们将创建另外两个组件 AboutUs.jsx 和 ContactUs.jsx
AboutUs.jsx
import React from 'react'
class AboutUs extends React.Component {
render() {
return <h1> About us </h1>
}
}
export default AboutUs;ContactUs.jsx
import React from 'react';
class ContactUs extends React.Component {
render() {
return <h1> Contact us </h1>
}
}
export default ContactUs;App.jsx
import React from 'react'
class App extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
export default App;我们现在有三个组件 App、AboutUs、ContactUs.jsx
我们将把这三个组件添加到 index.jsx 文件中。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'))Route、Link、BrowserRouter 是我们将从 react-router –dom 中导入的三个组件，用于实现路由。
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'));对于每个路由，我们将需要两个元素来指定操作。
- 路径
- 处理该路径的组件
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
< BrowserRouter >
<div>
<Route path="/" component={App} />
<Route path="/aboutus" component={ AboutUs } />
<Route path="/contactus" component={ ContactUs } />
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))现在，如果保存所有文件并运行 npm start 以查看操作。
如果我们转到 localhost:300/aboutus => 我们将看到关于我们的页面
类似地 localhost:300/contactus => 显示联系我们页面
但是，如果您注意到了，主页组件也在其他每个路径上显示。这是因为其他路径中也有“/”，而没有被精确检查。
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={Users} />
<Route path="/contactus" component={Contact} />
</div>
</Router>
);
ReactDOM.render(routs, document.getElementById('root'));我们在 App 组件的路径中添加了 exact 关键字。
现在，如果我们运行应用程序并查看 aboutus 和 contactus，我们将只会看到这些组件，并且主页组件不会添加到它们的视图中。
更新于: 2019年9月4日
2K+ 阅读量
广告