react-router-dom v4上下文路由器和路由未定义

Question

向下滚动当前代码&错误

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'

import App from './components/App';
import About from './components/pages/about';

const customHistory = createBrowserHistory()

ReactDOM.render((
  <Router history={customHistory}>

    <Switch>
      <Route path='/' component={App} />
      <Route path='/about' component={About}/>
    </Switch>



  </Router>
), document.getElementById('root'))

这段代码单独工作并呈现我的'app'组件

但是当我试图在我的应用程序组件中添加一个“链接”组件时，它将无法识别它。

//App.js
import React from 'react';
import Header from './Header';
import { Link } from 'react-router-dom'

class App extends React.Component {

  render() {
    return (
      <div className="App">

        <Header className="Header" header="Header" />


        <main className='main'>
            <Link to='about'>About</Link>
        </main>

      </div>
    );
  }
}

export default App;

Answer 1

首先，您使用一个BrowserRouter，这个创建自己的历史对象并使用这个。因此，在您的情况下，不应该将历史对象传递给它。实际上，在我查看了BrowserRouter的代码之后，它甚至应该在控制台中打印一个警告。如果我是你，我会把它命名为BrowserRouter，这样可以减少出错的可能性，并且在阅读代码时更加清晰。

然后，在v4中，路由器只能有1个子路由器。但是在交换机的情况下，它实际上只挂载匹配的路由。我不确定它是否打算像这样，试着把你的hierchy改成不同的东西，并让路由器的孩子总是挂载。下面是您的代码示例：

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

import App from './components/App';

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

然后在应用程序中构建路由逻辑，这甚至更有意义，因为应用程序可能就是应用程序，因此它应该始终存在。

//App.js
import React from 'react';
import Header from './Header';

class App extends React.Component {

  render() {

    return (
      <div className="App">
        <Header className="Header" header="Header" />
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About}/>
        </Switch>
      </div>
    );
  }

}

//Header.js
import React from 'react';
import {Link} from 'react-router-dom';

class Header extends React.Component {

  render() {

    return (
      <header className="header">
          <Link to='/'>Home</Link>
          <Link to='/about'>About</Link>
      </header >
    );

  }

}