React-router-dom - 相同的路由问题

Question

我是 react js 框架的新手，我目前正在做导航，但我遇到了关于我的路线的问题。这是我新安装的 react js 组件。

索引.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';


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

App.js

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {
  render() {
    return (
      <div>
        <Routes/>
      </div>
    );
  }
}
export default App;

src/routes/index.js

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

import Root from '../components/Root';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';

export default() =>(
<BrowserRouter>
    <Switch>
        <Route exact path="/" component={Root}>
            <Route exact path="/home" component={Home}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/contact" component={Contact}/>
        </Route>
    </Switch>
</BrowserRouter>
)

src/components/Root.js

import React, { Component } from 'react';

import Header from './Header';

class Root extends Component {
  render() {
    console.log(this.props)
    return (
        <div>
            <div>
                <Header/>
            </div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
  }
}
export default Root;

src/components/Header.js

import React, { Component } from 'react';
import {Navbar} from 'reactstrap';

class Header extends Component {

  render() {
    return (
        <div>
            <Navbar color="light" light expand="md">
                //navbar html code here
            </Navbar>
        </div>  
    );
  }
}
export default Header;

index.js:2178 警告：您不应在同一路由中使用<Route component> 和<Route children>； <Route children> 将被忽略

这是我的问题。

Answer 1

我认为您的警告缺少一些信息，因为 SO 似乎已经删除了类似 XML 的标签。

查看代码，我很确定警告应该说：

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

问题是您已将某些路线作为另一条路线的“孩子”。你不需要这样做。

<Switch>
    <Route exact path="/" component={Root}>
        <Route exact path="/home" component={Home}/>
        <Route exact path="/about" component={About}/>
        <Route exact path="/contact" component={Contact}/>
    </Route> // This is the problem, you don't need to enclose this.
</Switch>

您无需将Routes 括起来，因为它们都是准确的，并且始终将组件与路径匹配。

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

Answer 2

这对我总是有用的

Nested Routes in React Router v4