在 react-router v4 中嵌套路由 [英] Nesting Routes in react-router v4

问题描述

我已在我的应用程序中将 react 路由器升级到版本 4.但现在我收到错误

警告:你不应该使用<路由组件>和<路由子项>在同一条路线上；<路由子项>将被忽略

这个路由有什么问题?

import {转变，BrowserRouter 作为路由器，路由、索引路由、重定向、浏览器历史来自'反应路由器-dom'使成为((<路由器历史={ browserHistory }><开关><Route path='/' component={ Main }><IndexRoute 组件={搜索}/><Route path='cars/:id' component={ Cars }/><Route path='vegetables/:id' component={蔬菜}/></路线><重定向 from='*' 到='/'/></开关></路由器>), document.getElementById('main'))

解决方案

IndexRoute 和 browserHistory 在最新版本中不可用，而且 Routes 不接受带有 v4 的子 Routes，而是可以在组件本身中指定 Routes

import {转变，BrowserRouter 作为路由器，路由、重定向来自'反应路由器-dom'使成为((<路由器><开关><路由精确路径='/' component={ Main }/><重定向 from='*' 到='/'/></开关></路由器>), document.getElementById('main'))

然后在主组件中

render() {const {match} = this.props;返回 (<div>{/* 其他事情*/}<路由精确路径="/" component={ Search }/><Route path={`${match.path}cars/:id`} component={ Cars }/>

)}

在汽车组件中类似

你会有

render() {const {match} = this.props;返回 (<div>{/* 其他事情*/}<Route path={`${match.path}/vegetables/:id`} component={蔬菜}/>

)}

I've upgraded the react router to version 4 in my application. But now I'm getting the error

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

What is wrong with this routing?

import {
    Switch,
    BrowserRouter as Router,
    Route, IndexRoute, Redirect,
    browserHistory
} from 'react-router-dom'   

render((
    <Router history={ browserHistory }>
        <Switch>
            <Route path='/' component={ Main }>
                <IndexRoute component={ Search } />
                <Route path='cars/:id' component={ Cars } />
                <Route path='vegetables/:id' component={ Vegetables } />
            </Route>
            <Redirect from='*' to='/' />
        </Switch>
    </Router>
), document.getElementById('main'))

解决方案

IndexRoute and browserHistory are not available in the latest version, also Routes do not accept children Routes with v4, Instead, you can specify Routes within the component Itself

import {
    Switch,
    BrowserRouter as Router,
    Route,  Redirect
} from 'react-router-dom'   

render((
    <Router>
        <Switch>
            <Route exact path='/' component={ Main }/>

            <Redirect from='*' to='/' />
        </Switch>
    </Router>
), document.getElementById('main'))

Then in the Main Component

render() {
     const {match} = this.props;
     return (
        <div>
           {/* other things*/}
           <Route exact path="/" component={ Search } />
           <Route path={`${match.path}cars/:id`} component={ Cars } />
         </div>
    )

}

Similarly in the cars component

you will have

render() {
     const {match} = this.props;
     return (
        <div>
           {/* other things*/}
           <Route path={`${match.path}/vegetables/:id`} component={ Vegetables } />
        </div>
    )

}

这篇关于在 react-router v4 中嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！