2019-09-12 09:34:49 lijianxian199799 阅读数 191

   react路由

(react-router-dom和react-router-config的结合应用)

1.安装

npm i react-router-dom react-router-config –save

2.导入(需要的页面)

import { BrowserRouter, Route, Link,Switch,NavLink } from 'react-router-dom';

import {renderRoutes} from 'react-router-config';

3.新建三个主页面js文件

home.js

import React from 'react';

 

export default function Home(){

   return (

      <div>

        <h1>这是主页</h1>

        <a href="/about">去about</a>

        <a href="/discover">去discover</a>

      </div>    

   )

}

about.js

import React from 'react';

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

import {renderRoutes} from 'react-router-config';

//变量的导出用export,而不是export default

export const About = (props)=>{

   const route = props.route

   return (  

      <div>

        <h1>这是关于</h1>

        <a href="/">去home</a>

        <a href="/discover">去discover</a>

        <Link to="/about/my">关于我的</Link>

        <br />

        <Link to="/about/you">关于你的</Link>

        {/*使用renderRoutes方法继续渲染子路由,第二个参数可以进行传参*/}

        {renderRoutes(route.childrens,{user:'hello'})}

      </div>

   )

}

discover.js

import React from 'react';

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

import {renderRoutes} from 'react-router-config';

 

export default function Discover(props){

   const route = props.route

   return (  

      <div>

        <h1>这是发现</h1>

        <a href="/">去home</a><br />

        <a href="/about">去about</a><br />

        <Link to="/discover/earth">发现地球</Link>

        <br />

        <Link to="/discover/star">发现星星</Link>

        {renderRoutes(route.childrens)}

      </div>

   )

}

4.新建子页面js文件

my.js

import React from 'react';

 

export default function My(props){

   return (  

      <div>

        <h1>这是关于我的</h1>

        <p>{props.user}</p>

      </div>

   )

}

you.js

import React from 'react';

 

export default function You(){

   return (  

      <div>

        <h1>这是关于你的</h1>

      </div>

   )

}

star.js

import React from 'react';

 

export default function Star(){

   return (  

      <div>

        <h1>这是发现星星</h1>

      </div>

   )

}

earth.js

import React from 'react';

//<p>{props.match.params.id}</p>

export default function Earth(props){

   return (  

      <div>

        <h1>这是发现地球</h1>

       

      </div>

   )

}

5.配置route.js

在src目录下新建文件夹route(名字自己随便取),然后在该目录下新建route.js文件,在route.js里进行文件的配置

import Home from '../component/home'

//注意非函数、非表达式等导入要用{}括住

import {About} from '../component/about'

import Discover from '../component/discover'

import Earth from '../component/earth'

import Star from '../component/star'

import My from '../component/my'

import You from '../component/you'

 const routes = [

   {

      path:'/',

      component: Home,

      exact:true

   },

   {

      path:'/about',

      component: About,

      childrens:[

        {

        path:'/about/my',

        component:My

        },

        {

        path:'/about/you',

        component:You

        }

      ]

   },

   {

      path:'/discover',

      component: Discover,

      childrens:[

        {

        path:'/discover/earth',

        component:Earth

        },

        {

        path:'/discover/star',

        component:Star

        }

      ]

   }

]

export {routes}

 

6.在index.js里渲染路由

import React from 'react';

import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';

import { BrowserRouter} from "react-router-dom";

import { renderRoutes } from "react-router-config";

import './index.css';

import {routes} from './router/route';

// 使用renderRoutes方法渲染路由

ReactDOM.render(<BrowserRouter>

            { renderRoutes(routes)  }

            </BrowserRouter>, document.getElementById('root'));

 

serviceWorker.unregister();

 

2018-05-21 21:57:59 u013356907 阅读数 2087

React-Router是基于React之上的一个强大的路由库,使用它你可以快速的添加视图和数据流到你的应用中,并保持页面和URL的同步。

React-Router3的配置使用:

package,json

{
  "name": "React-webpack-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack",
    "start": "node server.js"
  },
  "dependencies": {
    "@types/react": "^16.3.14",
    "@types/react-dom": "^16.0.5",
    "@types/react-router": "^3.0.15",
    "express": "^4.16.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router": "^3.2.1",
    "ts-loader": "^3.5.0",
    "typescript": "^2.6.2",
    "webpack": "^3.12.0",
    "webpack-dev-middleware": "^2.0.6",
    "webpack-hot-middleware": "^2.22.2"
  }
}

react-router3的路由配置

import * as React from 'react';
import { Route, IndexRoute } from 'react-router';
import Wrapper from "./components/Wrapper";
import App from "./components/App";
import Home from "./components/Home";
export const routes = (
    <Route>
        <Route path="/" component={Wrapper}>
            <IndexRoute component={App} />
            <Route path="home" component={Home} />
            {//你可以在这里继续添加自己的路由信息}
        </Route>
    </Route>
)

React入口配置文件

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Root from "./Root";
ReactDOM.render(<Root />, document.getElementById("root"))

Root.tsx配置, 这里是使用的基于hash的路由导航,你也可以使用browserHistory的路由

import * as React from 'react';
import { Router, hashHistory } from 'react-router';
import { routes} from "./Routes";
class Root extends React.Component<any, any>{
    constructor(props: any) {
        super(props)
    }
    render() {
        return <Router history={hashHistory} routes={routes} />
    }
}
export default Root;

完整代码请参考 React-Router3

React-Router4的配置使用:

import * as React from 'react';
import { Route, HashRouter, Switch } from 'react-router-dom';
import Wrapper from "./components/Wrapper";
import App from "./components/App";
import Home from "./components/Home";
class Root extends React.Component<any, any>{
    constructor(props: any) {
        super(props)
    }
    render() {
        return (
            <HashRouter>
            {//这里的div包裹是必须要有的,不然会报错( A <Router> may have only one child element) 
            //这里你也可以使用一个组件包裹Route信息 如 Wrapper
        }
                <div>{//<Wrapper>}
                {//这里的exact必须要加,不然APP组件和HOME组件都会被渲染出来,加上exact只会渲染匹配的path对应的组件}
                {//<Switch>}
                    <Route exact path="/" component={App} />
                    <Route  path="/home" component={Home} />
                    { //如果需要“未找到”的路由可以使用如下 ,但是这样的就需要使用Switch组件将所有Route组件包裹起开,不然渲染的匹配组件的时候会将 NoMatch组件一起渲染出来}
                    <Route component={NoMatch} />
                    {//</Switch>}
                </div>
                {//</Wrapper>}
            </HashRouter>
        )
    }
}
export default Root;

Wrapper.tsx组件

import * as React from 'react';
class Wrapper extends React.Component<any, any>{
    constructor(props: any) {
        super(props)
    }
    render() {
        return <div className="wrapper-component">{this.props.children}</div>
    }
}
export default Wrapper;

入口文件 index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Root from "./Root";
ReactDOM.render(<Root />, document.getElementById("root"))

完整代码请参考 React-Router4

2019-02-18 10:49:09 cvper 阅读数 193

在学习React 的过程中,当学习到路由的时候,就会发现 react-router 或者 react-router-dom 组件;

这是已经写好的,可以直接拿来使用的react 路由组件;

 

第一个问题: 有的时候我们会看到有些react 的学习的例子中使用了 react-router ,另外一些却使用了

                       react-router-dom (v4.3.1);其实这两个都是路由的组件,只是有些小小的差别;

                       我们来看下react-router 这个组件是啥样的:

                       我们先npm 下载react-router 和 react-router-dom 这两个模块,然后打开node_modules目录

                       找到这两个模块,打开文件,查看目录,如下图所示;

                       我们对比就能发现,原来这两个模块没啥太大的差别,react-router-dom 的路由组件多出来

                        几个而已;所以我们在使用的时候也没必要纠结使用哪个;

                        只要这个模块有我们需要使用的组件,使用哪一个都是可以的,比如说我们使用Switch这个组件,

                        这两个模块中都是有的,那么我使用哪一个都是可以的; 

                        如果我们使用 react-router-dom 这个模块,那么 react-router-dom 模块是依赖于 react-router 模块的,

                        所以两个模块是都会下载的;

 

 

                                                            

2018-01-10 13:12:38 u010377383 阅读数 3166

前言

需要注意的是,现在react-router已经到了V4版本了,并且官方说这是一个完全重写的版本。所以在我不太熟悉的情况下,保险起见还是先选择V3版本,等以后再更新。

(一)安装React-Router

$ yarn add react-router@3.0.5 @types/react-router@3.0.5 --dev

App.tsx相关三个文件移动到 views下,并改为app开头
在src目录下创建文件src/routers/index.tsx,并添加以下内容:

/**
 * @component routers
 * @description 路由配置
 * @time 2018/1/9
 * @author ***
 **/
import * as React from 'react';
import { Router,Route, IndexRoute } from 'react-router';

import App from '../views/app'; /** 重命名了App.tsx **/
import Hello from '../views/Hello';
import Error from '../views/Error';

export interface Props {
    history: any;
}

const RouterConfig = ({ history }: Props)=> {
    return (
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute />
                <Route path="/demo" component={Hello} >
                </Route>
            </Route>

            <Route path="*" component={Error} />
        </Router>
    )
};

export default RouterConfig;

项目一般会有个顶层Layout布局放在app.tsx。所以在顶层包装一层。页面样式请自行修改。

(二)增加Error页面

在src目录下创建文件src/views/Error/index.tsx,并添加以下内容:

/**
 * @component Error
 * @description 错误页
 * @time 2018/1/9
 * @author ***
 **/
import * as React from 'react';
import { Button } from 'antd';
import { Link } from 'react-router';

const Error = () => (
    <div className="error-container" >
      <p />
      <div>
        <h2>404</h2>
        <p>抱歉,你访问的页面不存在</p>
        <Button type="primary">
          <Link to="/">返回首页</Link>
        </Button>
      </div>
  </div>
);

export default Error;

页面不太美观,需要样式,请自行修改。

(三)安装React-Router-Redux

 $ yarn add react-router-redux@4.0.8 @types/react-router-redux@4.0.48 --dev

修改入口文件

/**
 * @component index
 * @description 全局入口文件
 * @time 2018/1/9
 * @author ***
 **/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import StoreConfig  from './store';
import { browserHistory } from 'react-router';
import RouterConfig from './routers';
import { syncHistoryWithStore } from 'react-router-redux';
import './index.less';

const store= StoreConfig();
const history= syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <RouterConfig history={history} />
    </Provider>,
    document.getElementById('root') as HTMLElement
);
registerServiceWorker();

我们添加的是browserHistory作为路由,不是hashHistory,所以我们需要对服务器做一些路由配置才行(PS:ngnix配置跳转)。至于为什么,请自行搜索,这里不做说明了。如果不想用过多设置,也可以直接把browserHistory替换为hashHistory即可。

src/reducers/index.tsx中添加上routerReducer

/**
 * @component reducers
 * @description 根reducers
 * @time 2018/1/9
 * @author ***
 **/
import { combineReducers } from 'redux';
import { enthusiasm } from './demo';
import { routerReducer } from 'react-router-redux';

const rootReducer= combineReducers({
    demo: enthusiasm,
    routing: routerReducer,
});

export default rootReducer;

执行npm run start运行效果。
效果

点击去demo去demo页面。点击error或者在输入栏。输入不合法的url,会跳转到error。

(四)后续

添加开发必备配置
- CSS Modules 链接

因为antd和其有冲突。解决方案

相关代码放在github

后续是项目相关代码,不会提交到这个分支。

2019-09-19 13:16:40 GoodBodyBoy 阅读数 86

React-router/react-router-dom学习指南(附代码)


目录

1. 快速入门

2. 基本组件

3. 服务器渲染

4. 代码拆分

5. 滚动恢复

6. 原理(动态路由/静态路由)

7. 测试

8. Redux 融合

9. 静态路由


1.快速入门

您需要一个React web应用程序来添加react -router。
如果你需要创建一个,最简单的方法就是使用一个叫做create React App的脚手架工具。
首先安装create- response -app(如果你还没有的话),然后用它创建一个新项目。

npm install -g create-react-app
create-react-app demo-app
cd demo-app

安装

React Router DOM发布到npm,因此您可以使用npm或yarn安装它。npm安装react-router-dom
将下面的示例复制/粘贴到src/App.js中。

npm install react-router-dom

例子:基本的路由

在这个例子中,我们有3个由处理的“页面”组件。注意:我们使用<Link to="/"> 而不是<a href="/">

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
      </div>
    </Router>
  );
}

export default AppRouter;

!!!点击链接直接体验->:基本路由体验

例子:嵌套的路由

这个例子展示了嵌套路由是如何工作的。route /topics加载topics组件,该组件在路径上有条件地呈现任何进一步的:id值。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <Header />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Topic({ match }) {
  return <h3>Requested Param: {match.params.id}</h3>;
}

function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:id`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Header() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>
  );
}

export default App;

!!!点击链接直接体验->:基本路由体验

现在你可以开始练习了。路由快乐!


2. 基本组件

React Router中有三种类型的组件:路由器组件、路由匹配组件和导航组件。
web应用程序中使用的所有组件都应该从response -router-dom导入。
eg:

import { BrowserRouter, Route, Link } from "react-router-dom";

路由器

每个React路由器应用程序的核心都应该是一个路由器组件。对于web项目,response -router-dom提供了<BrowserRouter><HashRouter>路由器。这两种方法都将为您创建一个专门的历史对象。一般来说,如果有响应请求的服务器,应该使用<BrowserRouter>;如果使用静态文件服务器,应该使用<HashRouter>

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);

路由匹配

有两个路由匹配组件:< route ><Switch>

路由匹配是通过比较<Route>的路径 path 和当前位置的路径名来完成的。当<Route>匹配时,它将呈现内容;当不匹配时,它将呈现null。没有路径的<Route>总是匹配的。

您可以在任何你希望的位置包含<Route>来呈现内容。通常,将许多可能的<Route>并排列出是有意义的。<Switch>组件用于将<Route>分组在一起。

<Switch>对于分组<Route>不是必须存在的,但是它非常有用。一个<Switch>将遍历它的所有子元素<Route>,并且只呈现与当前位置匹配的第一个元素。当多个路由的路径匹配相同的路径名时,当在路由之间进行动画转换时,以及当没有路由匹配当前位置时(这样您就可以呈现一个“404”组件),这都很有帮助。

import { Route, Switch } from "react-router-dom";

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* when none of the above match, <NoMatch> will be rendered */}
  <Route component={NoMatch} />
</Switch>

路由渲染属性

对于如何呈现给定<Route>的组件,您有三种支持选择:组件、呈现和子组件。您可以查看<Route>文档以获得关于每个组件的更多信息,但是在这里我们将重点介绍组件和呈现,因为这两个组件几乎总是使用。

组件应该在您拥有现有组件时使用(可以是React)。要呈现的组件或无状态功能组件。render接受内联函数,仅当必须将范围内变量传递给要呈现的组件时才应使用。您不应该使用带有内联函数的组件支柱来传递范围内变量,因为您将获得不希望的组件卸载/重新加载。

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

导航

React Router提供一个<Link>组件来在应用程序中创建链接。无论在何处呈现<Link>,都会在应用程序的HTML中呈现一个来链接。

<NavLink>是一种特殊类型的<Link>,当它的to prop匹配当前位置时,可以将自己设置为“active”。

任何时候您想强制导航,都可以呈现<Redirect>。当<Redirect>呈现时,它将使用 to prop导航。

<Link to="/">Home</Link>
// <a href='/'>Home</a>

location.// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>

<Redirect to="/login" />

3. 服务器渲染


4. 代码拆分


5. 滚动恢复


6. 原理(动态路由/静态路由)


7. 测试


8. Redux 融合

Redux是React生态系统的重要组成部分。我们希望使React Router和Redux的集成尽可能无缝,以满足用户对两者的需求。

阻塞更新

一般来说,React Router和Redux可以很好地协同工作。不过,有时应用程序的组件在位置发生变化时不会更新(子路由或活动导航链接不会更新)。

比如发生这样的情况:

  1. 组件通过connect()(Comp)连接到redux。
  2. 该组件不是一个“路由组件”,这意味着它不是这样呈现的:< route component={SomeConnectedThing}/>。

未完 待更新


9. 静态路由

静态路由

React Router的以前版本使用静态路由来配置应用程序的路由。这允许在呈现之前检查和匹配路由。由于v4转移到动态组件而不是路由配置,以前的一些用例变得不那么明显和棘手。

我们正在开发一个包来处理静态路由配置和React路由器,以继续满足这些用例。它正在开发中,但我们希望你能尝试一下,并提供帮助。

路由配置链接 点击跳转React router config

没有更多推荐了,返回首页