Javascript React路由器4嵌套路由替代技术_Javascript_Reactjs_Redux_React Router_React Router V4

Javascript React路由器4嵌套路由替代技术

javascript reactjs redux

Javascript React路由器4嵌套路由替代技术,javascript,reactjs,redux,react-router,react-router-v4,Javascript,Reactjs,Redux,React Router,React Router V4,在我尝试执行嵌套路由时，当路由通过Link或history.push更改时，我无法装载子组件；但是，如果直接在root.js文件中声明路由，它就可以工作。因此，理想情况下，我希望在root/routes.js文件中保留尽可能多的routes配置，而不是在整个应用程序中（我正在迭代root/routes.js对象，以自动完成此操作；我的意思是……尝试）根js文件。您可以看到setRoutefn返回一个新组件，其中子路由作为props传递？我相信这会奏效： // root.js import Re

在我尝试执行嵌套路由时，当路由通过Link或history.push更改时，我无法装载子组件；但是，如果直接在root.js文件中声明路由，它就可以工作。因此，理想情况下，我希望在root/routes.js文件中保留尽可能多的routes配置，而不是在整个应用程序中（我正在迭代root/routes.js对象，以自动完成此操作；我的意思是……尝试）

根js文件。您可以看到

setRoute

fn返回一个新组件，其中子路由作为

props

传递？我相信这会奏效：

// root.js
import React from 'react'
import { Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'

const setRoute = (route) => {
  const MyComponent = route.component
  return <Route key={route.path} exact={route.exact || false} component={() => (<MyComponent routes={route.routes} />)} />
}

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        { rootRoutes.map(route => setRoute(route)) }
      </BrowserRouter>
    </Provider>
  )
}

export default Root

//root.js
从“React”导入React
从“react router”导入{Route，Switch}
从“react router dom”导入{BrowserRouter}
从“react redux”导入{Provider}
从“./routes”导入根路由
const setRoute=（route）=>{
常量MyComponent=route.component
return（）}/>
}
常量根=（{store，history}）=>{
返回(
{rootRoutes.map（route=>setRoute（route））}
)
}
导出默认根目录

我要用作包装器的主应用程序：

// main app 
import React, { Component } from 'react'
import { isBrowser } from 'reactatouille'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { withRouter, Route } from 'react-router'
import Navbar from '../navbar'

// include the stylesheet entry-point
isBrowser() && require('../../../../sass/app.scss')

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      init: true
    }
  }

  render () {
    return (
      <div className={'app' + ' ' + (!this.state.init && 'uninitialised')}>
        <Navbar />
        <main>
          { Array.isArray(this.props.routes) && this.props.routes.map(route => <Route key={route.path} {...route} />) }
        </main>
      </div>
    )
  }
}

// export default App
function mapStateToProps (state, ownProps) {
  return {
    // example: state.example
  }
}

function matchDispatchToProps (dispatch) {
  return bindActionCreators({
    // replay: replay
  }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(withRouter(App))

//主应用程序
从“React”导入React，{Component}
从“reactatouille”导入{isBrowser}
从“react redux”导入{connect}
从“redux”导入{bindActionCreators}
从“反应路由器”导入{withRouter，Route}
从“../Navbar”导入Navbar
//包括样式表入口点
isBrowser（）&&require（“../../../../../sass/app.scss”）
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
init：对
}
}
渲染（）{
返回(
{Array.isArray（this.props.routes）&&this.props.routes.map（route=>）}
)
}
}
//导出默认应用程序
函数mapStateToProps（状态，ownProps）{
返回{
//示例：state.example
}
}
功能匹配DispatchToprops（调度）{
返回bindActionCreators({
//重播：重播
}，调度）
}
导出默认连接（mapStateToProps、matchDispatchToProps）（使用路由器（应用））

我知道我可能也能做到类似的事情，比如

// root
import React from 'react'
import { Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'
import MyAppWrapper from 'xxx/MyAppWrapper'    

const setRoute = (route) => {
  const MyComponent = route.component
  return <Route key={route.path} exact={route.exact || false} component={() => (<MyComponent routes={route.routes} />)} />
}

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <MyAppWrapper>
          <Route path='x' component={x} />
          <Route path='y' component={y} />
        </MyAppWrapper>
      </BrowserRouter>
    </Provider>
  )
}

export default Root

//根目录
从“React”导入React
从“react router”导入{Route，Switch}
从“react router dom”导入{BrowserRouter}
从“react redux”导入{Provider}
从“./routes”导入根路由
从“xxx/MyAppWrapper”导入MyAppWrapper
const setRoute=（route）=>{
常量MyComponent=route.component
return（）}/>
}
常量根=（{store，history}）=>{
返回(
)
}
导出默认根目录

注意：在测试期间，我注意到它在服务器端工作？我的意思是，我可能错过了什么，我没有保存我的工作。另外，当它失败时，前一个组件（默认组件）仍然被装载，并且不会卸载

我甚至尝试过（没有成功……我想知道这是否是一个bug）：

从“React”导入React
从“反应路由器”导入{Route}
从“react router dom”导入{BrowserRouter}
从“react redux”导入{Provider}
从“../App/containers/App”导入应用程序
从“./routes”导入根路由
常量根=（{store，history}）=>{
返回(
(
)，您可以在此处找到实时示例（），单击主题
。可能我尝试执行的操作不受支持，但我们应该得到一条错误消息。
好的，我发现了输入错误。解决方法是使用渲染并通过Object.assign和spread操作符传递routerProps+您想要的任何其他道具
// root.js
import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import App from '../app/containers/app'
import rootRoutes from './routes'

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Route path='/' render={routeProps => <App {...Object.assign({}, routeProps, { routes: rootRoutes[0].routes })} />} />
      </BrowserRouter>
    </Provider>
  )
}

export default Root

//root.js
从“React”导入React
从“反应路由器”导入{Route}
从“react router dom”导入{BrowserRouter}
从“react redux”导入{Provider}
从“../App/containers/App”导入应用程序
从“./routes”导入根路由
常量根=（{store，history}）=>{
返回(
} />
)
}
导出默认根目录

和主应用程序包装器：
class App extends Component {
  render () {
    return (
      <div className={'app kiosk' + ' ' + (!this.state.init && 'uninitialised')}>
        <Navbar />
        <main>
          { Array.isArray(this.props.routes) && this.props.routes.map(route => <Route key={route.path} exact={route.exact} path={route.path} component={route.component} />) }
        </main>
      </div>
    )
  }
}   

export default App

类应用程序扩展组件{
渲染（）{
返回(
{Array.isArray（this.props.routes）&&this.props.routes.map（route=>）}
)
}
}   
导出默认应用程序

路由文件：
import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'

const setRoute = (route) => {
  const MyComponent = route.component
  return <Route key={route.path} path={route.path} render={routeProps => <MyComponent {...Object.assign({}, routeProps, { routes: rootRoutes[0].routes })} />} />
}

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <div>
          { rootRoutes.map(route => setRoute(route)) }
        </div>
      </BrowserRouter>
    </Provider>
  )
}

export default Root

从“React”导入React
从“反应路由器”导入{Route}
从“react router dom”导入{BrowserRouter}
从“react redux”导入{Provider}
从“./routes”导入根路由
const setRoute=（route）=>{
常量MyComponent=route.component
return}/>
}
常量根=（{store，history}）=>{
返回(
{rootRoutes.map（route=>setRoute（route））}
)
}
导出默认根目录

// main app 
import React, { Component } from 'react'
import { isBrowser } from 'reactatouille'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { withRouter, Route } from 'react-router'
import Navbar from '../navbar'

// include the stylesheet entry-point
isBrowser() && require('../../../../sass/app.scss')

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      init: true
    }
  }

  render () {
    return (
      <div className={'app' + ' ' + (!this.state.init && 'uninitialised')}>
        <Navbar />
        <main>
          { Array.isArray(this.props.routes) && this.props.routes.map(route => <Route key={route.path} {...route} />) }
        </main>
      </div>
    )
  }
}

// export default App
function mapStateToProps (state, ownProps) {
  return {
    // example: state.example
  }
}

function matchDispatchToProps (dispatch) {
  return bindActionCreators({
    // replay: replay
  }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(withRouter(App))

// root
import React from 'react'
import { Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'
import MyAppWrapper from 'xxx/MyAppWrapper'    

const setRoute = (route) => {
  const MyComponent = route.component
  return <Route key={route.path} exact={route.exact || false} component={() => (<MyComponent routes={route.routes} />)} />
}

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <MyAppWrapper>
          <Route path='x' component={x} />
          <Route path='y' component={y} />
        </MyAppWrapper>
      </BrowserRouter>
    </Provider>
  )
}

export default Root

import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import App from '../app/containers/app'
import rootRoutes from './routes'

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Route path='/' render={() => (
          <App />
        )} />
      </BrowserRouter>
    </Provider>
  )
}

export default Root

// root.js
import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import App from '../app/containers/app'
import rootRoutes from './routes'

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Route path='/' render={routeProps => <App {...Object.assign({}, routeProps, { routes: rootRoutes[0].routes })} />} />
      </BrowserRouter>
    </Provider>
  )
}

export default Root

class App extends Component {
  render () {
    return (
      <div className={'app kiosk' + ' ' + (!this.state.init && 'uninitialised')}>
        <Navbar />
        <main>
          { Array.isArray(this.props.routes) && this.props.routes.map(route => <Route key={route.path} exact={route.exact} path={route.path} component={route.component} />) }
        </main>
      </div>
    )
  }
}   

export default App

import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'

const setRoute = (route) => {
  const MyComponent = route.component
  return <Route key={route.path} path={route.path} render={routeProps => <MyComponent {...Object.assign({}, routeProps, { routes: rootRoutes[0].routes })} />} />
}

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <div>
          { rootRoutes.map(route => setRoute(route)) }
        </div>
      </BrowserRouter>
    </Provider>
  )
}

export default Root