在本章中，我们将学习如何为应用程序设置路由。
第1步 - 安装React Router
安装react-router的简单方法是在命令提示符窗口中运行以下代码：
F:\worksp\reactjs\reactApp>npm install react-router
在项目的根目录下创建.babelrc文件，并在.babelrc文件中添加以下代码 -
{
"presets": ["es2015", "react"]
}
创建一个文件：index.html在根目录下，并使用以下的代码 -
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React Router示例</title>
</head>
<body>
<div id = "app"></div>
<script type = "text/javascript" src = "bundle.js"></script>
</body>
</html>
要配置webpack.config.js文件，请在webpack.config.js中添加以下代码 -
module.exports = {
entry: './app/main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
},
devServer: {
port: 8080
}
};
第2步 - 添加一个路由器
现在，我们将添加路线到应用程序。 创建一个名为App的目录，并创建文件并命名为main.js和App.js 。
文件：main.js -
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(<App />, document.getElementById('app'));
文件：App.js -
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Login from './Login';
class App extends Component {
render() {
return (
<Router>
<div>
<h2>Welcome to React Router Tutorial</h2>
<ul>
<li><Link to={'/'}>Home</Link></li>
<li><Link to={'/Login'}>Login</Link></li>
</ul>
<hr />
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/Login' component={Login} />
</Switch>
</div>
</Router>
);
}
}
export default App;
第3步 - 创建组件
在这一步中，我们将在App目录中创建两个组件(Home)和(Login)。
文件：Home.js -
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div>
<h2>Home</h2>
</div>
);
}
}
export default Home;
文件：Login.js -
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
</div>
);
}
}
export default Login;
当应用程序启动时，我们将看到两个可用于更改路由的链接。
上一篇：
ReactJS键(Key)
下一篇：
ReactJS通量概念