@jackgreen/react-router-view - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

package.json

		{
		"name": "@jackgreen/react-router-view",
		"version": "0.1.0",
		"version": "1.0.0",
		"private": false,
		@@ -9,3 +9,2 @@ "main": "dist/index.min.js",
		"files": [
		"src",
		"dist"
		@@ -12,0 +11,0 @@ ],

README.md

		@@ -7,19 +7,16 @@ # react-router-view

		### webpack loader 包含本组件
		[examples](https://codesandbox.io/s/react-router-view-example-rmf0o?fontsize=14&hidenavigation=1&theme=dark)

		```sh
		npm i @jackgreen/react-router-view
		```
		exclude: /node_modules(?!\/react-router-view)/
		```

		### 引入

		```tsx
		import { BrowserRouter } from 'react-router-dom'
		import RouterView, { RouteConfig } from 'react-router-view'

		// 路由配置
		```js
		const routes: RouteConfig[] = [
		{ path: '/single', component: Single },
		{
		path: `/multi`,
		path: '/single',
		component: Single
		},
		{
		path: '/multi',
		component: Multi,
		@@ -39,9 +36,9 @@ childRoutes: [

		function App(props) {
		function Multi(props) {
		return (
		<div>
		<BrowserRouter>
		// 一级路由需要在 router 组件中，透传 props，并且传入 routes
		<RouterView {...props} routes={routes} />
		</BrowserRouter>
		<Link to='/multi/child1'>child1</Link>
		<Link to='/multi/child2'>child2</Link>
		// 二级路由 // 必须透传 props // props 中 routes，所以不需要单独传 routes
		<ReactRouterView {...props} />
		</div>
		@@ -51,12 +48,12 @@ )

		function Multi(props) {
		function App() {
		return (
		<div>
		// 二级路由开始，只需要透传 props
		<RouterView {...props} />
		</div>
		<BrowserRouter>
		<Link to='/single'>single</Link>
		<Link to='/multi'>multi</Link>
		// 一级路由 // 必须在 Router 中 // 并且传入 routes // 透传 props 看需求
		<ReactRouterView {...props} routes={routes} />
		</BrowserRouter>
		)
		}

		ReactDOM.render(<App />, document.getElementById('app'))
		```
		@@ -72,4 +69,7 @@
		export interface RouteConfig extends RouteProps {
		// 路由访问 url
		path: string
		// react 组件
		component: React.ComponentType<any>
		// 子路由，需要在本组件引入 ReactRouterView，用来渲染 Route 组件
		childRoutes?: RouteConfig[]
		@@ -79,28 +79,2 @@ }

		### RouteProps.path

		路由访问 url

		### RouteProps.component

		react 组件

		### RouteProps.childRoutes

		子路由

		## 问题

		`Swtich Route Link` 等路由组件必须要在 `Router` 组件中使用，只能以源码的方式引入，在项目中 babel 配置包含 `node_modules/react-router-view`，随着项目一起打包。

		```js
		// 打包后的部分代码
		// 直接使用 Swtich 会报错
		// You should not use <Switch> outside a <Router>
		function ReactRouterView(props) {
		var routes = props.routes
		return React.createElement(reactRouterDom.Switch)
		}
		```

		## 参考
		@@ -107,0 +81,0 @@

src/index.tsx

@jackgreen/react-router-view - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics