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，则开始查看操作。

如果我们转到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组件将不会添加到其视图中。