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

首先,您使用BrowserRouter,它创建自己的历史对象并使用这个。因此,在您的情况下,不应该向其传递历史对象。实际上,在我看了BrowserRouter的代码之后,它甚至应该在你的控制台上打印一条警告。如果我是你,我会把它命名为BrowserRouter,这样当你阅读代码时,它就不那么容易出错,也更清晰了。

//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 >
    );

  }

}

当前代码

//索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } 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';
import Main from './Main';

class App extends React.Component {

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

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

        <Main className="Main" />

      </div>
    );
  }
}

export default App;

import React from 'react';
import { Switch, Route } from 'react-router-dom'
import Home from './Home';
import About from './About';

class Main extends React.Component {
    render() {
        return (
            <div className='Main-Container'>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route path='/about' component={About} />
                </Switch>
            </div>
        )
    }
}

export default Main;

最近的错误

警告:失败的上下文类型:上下文 router 标记为 中需要 Switch undefined . in Switch(由Main创建) 主要(由应用程序创建) 在div中(由应用程序创建) 应用内TypeError:无法读取未定义的属性“route” at/Users/Ryan/Desktop/df/grnd/node_modules/react-dom/lib/react-compositecomponent.js:795:21 在measureLifeCyclePerf(/Users/Ryan/Desktop/df/grnd/node\u modules/react-dom/lib/ReactCompositeComponent.js:75:12) (/Users/Ryan/Desktop/df/grnd/node_modules/react-dom/lib/react-compositecomponent.js:794:25) 在ReactCompositeComponentWrapper。PerformitialMount(/Users/Ryan/Desktop/df/grnd/node\u modules/react-dom/lib/ReactCompositeComponent.js:361:30) 在ReactCompositeComponentWrapper。mountComponent(/Users/Ryan/Desktop/df/grnd/node\u modules/react-dom/lib/react-compositecomponent.js:257:21) 在ReactDOMComponent。mountchilds(/Users/Ryan/Desktop/df/grnd/node\u modules/react-dom/lib/ReactMultiChild.js:236:44)

我发现了导致错误的原因:服务器渲染

目前,我正在使用这段代码

 //server.js

 server.get('/', (req, res) => {
      res.render('index', {
        content: ReactDOMServer.renderToString(<App />)
      });
    });

//index.ejs

<%- include('header') -%>
   <div id="root"><%- content -%></div>
<%- include('footer') -%>

当我发表评论时 content: ReactDOMServer.renderToString(<App />) 把它换成 content: 'Hello' <Route/> 和 <Link/>