create react app 使用BrowserRouter界面跳转

本文将讲述在create react app中

1. 使用BrowserRouter绑定URL和界面
2. 使用Link标签跳转
3. 使用history在js中实现跳转。

目录

• 项目结构
• 1、react-router-dom的安装
• 2、填写代码
• 3、路由绑定测试
• 4、使用Link 标签进行跳转
• 5、在js中跳转（history）

项目结构

假设在项目中我们有两个界面，我们需要两个路由来完成页面的分配。我们常常使用pages文件夹区分不同界面。

1、react-router-dom的安装

在项目工程中输入一下代码来安装 react-router-dom
npm install react-router-dom --save

2、代码填写

小编习惯在直接把路由写到 index.js ，所以把所有App.js 都删除了，大家也可以把 App.js 写为路由。
页面的css 文件用于添加样式, 里面暂时不用写什么代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Index from './pages/index';
import About from './pages/about';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

ReactDOM.render(
 <React.StrictMode>
   <Router>
       <Switch>
         <Route path="/about" component={About} />
         <Route path='/' component={Index} />
       </Switch>
     </Router>
 </React.StrictMode>,
 document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

其中 Index 和 About 是pages 中的界面。通过如下代码我们建立起了URL 和 界面之间的关系。注意：这里一定要把‘/’主页路径放到最后一个Route，不然他的优先级会覆盖掉后面的所有路由

<Router>
  <Switch>
    <Route path="/about" component={About} />
    <Route path='/' component={Index} />
  </Switch>
</Router>

让我们注意看导入的部分

import Index from ‘./pages/index’;
import About from ‘./pages/about’;
import { BrowserRouter as Router, Route, Switch} from ‘react-router-dom’;

pages/index/index.js

import React from 'react';


class Index extends React.Component {
   render = () => {
       return <h1>this is index?</h1>
   }
}
export default Index;

pages/about/index.js

import React from 'react';

class About extends React.Component {
    render = () =>{
        return <h1>this is about page!!</h1>;
    }
}
export default About;

3、路由绑定测试

在项目工程目录输入npm start ,现在我们就可以通过访问"/" 和 "/about"来访问两个不同的界面了。


如果出现了如下的错误提示

Can’t resolve ‘react-router-dom’

则是第一步react-router-dom的安装出了问题，请再次安装或者试试cnpm install react-router-dom --save 。

4、使用Link 标签进行跳转

使用link 标签会渲染出一个<a>超链接来进行界面的跳转，代码如下，只需修改界面的代码。

pages/index/index.js

import React from 'react';
import {Link} from 'react-router-dom';

class Index extends React.Component {
   render = () => {
       return <>
           <h1>this is index?</h1>
           <Link to="/about">关于</Link>
       </>;
   }
}
export default Index;

pages/about/index.js

import React from 'react';
import {Link} from 'react-router-dom';

class About extends React.Component {
    render = () =>{
        return <>
            <h1>this is about page!!</h1>
            <Link to="/">首页</Link>
        </>;
    }
}
export default About;

可以看到如下的效果

5、在js中跳转（history）

现在考虑这样一个需求，假设加载一个页面时需要判断用户是否已经登陆，如果登陆了就正常加载这个界面，否则就跳转到登陆界面，这时就需要我们使用js来控制跳转了。

加入必要文件

data.js 用于存放全局变量， login 是用于登陆的模拟界面

修改代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

import Index from './pages/index';
import About from './pages/about';
import Login from './pages/login';
import {Router, Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history';

class Main extends React.Component {
 constructor(){
   super();
   this.state = {
     history: createBrowserHistory()
   }
 }
 render = () => {
   return(
     <Router history={this.state.history}>
     <Switch>
       <Route path="/about" component={About} />
       <Route path="/login" component={Login} />
       <Route path='/' component={Index} />
     </Switch>
     </Router>
   )
 }
}


ReactDOM.render(
 <Main/>,
 document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

一下这个history是实现js 控制的路的关键

<Router history={this.state.history}>

让我们注意看导入的部分

import {createBrowserHistory} from ‘history’;

注意 ：这里的导入是新的写法，如果报错了，可以尝试import createHistory from 'history/createBrowserHistory';

data.js

用于存放全局变量，这里的islogin用于模拟存放用户的登陆状态

var global_data = {
    islogin: false
  }
export default global_data;

pages/about/index.js

在构造函数中，对登陆状态进行判断，如果没有登陆就使用this.props.history.push()跳转到登陆界面

import React from 'react';
import {Link} from 'react-router-dom';
import Data from '../../data';

class About extends React.Component {

   constructor(props){
       super(props);
       if(!Data.islogin){
           this.props.history.push("login");
       }
   }

   render = () =>{
       return <>
           <h1>this is about page!!</h1>
           <Link to="/">首页</Link>
       </>;
   }
}
export default About;

pages/login/index.js

登陆界面：点击界面中的按钮就会变为已登陆状态，使用this.props.history.goBack()跳转回 来时的界面。

import React from "react";
import Data from "../../data";

class Login extends React.Component {
    login = () =>{
        Data.islogin = true;
        this.props.history.goBack();
    }
    render = () => {
        return <h2>
            <p>这个时登陆界面</p>
            <button onClick={this.login}>点击登陆</button>
        </h2>
    }
}
export default Login;

最后效果，你访问/about之前必须经过登陆界面。

至此，这篇文章就结束了，希望对大家有帮助，有什么问题可以在评论区提出。