React.js路由
在ReactRouterv4之前，react中的路由是静态的，但在v4更新后是动态的。在单页应用程序中，我们只有一页index.html和基于路由显示的不同组件。
在非spaWeb应用程序中，服务器根据请求返回页面。要开始路由，请首先安装路由软件包-
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，则开始查看操作。
如果我们转到localhost：300/aboutus=>，我们将看到“关于我们”页面
同样localhost：300/contactus=>显示与我们联系页面
但是，如果您已经注意到，home组件也会在其他所有路径上显示。这是因为在其他路径中也存在“/”，但未正确检查。
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组件的路径中添加了完全相同的关键字。
现在，如果我们运行该应用程序并查看abouts和contactus，我们将仅看到那些组件，而home组件将不会添加到其视图中。