Reactjs路由器不渲染任何组件

Question

webpack.config.js

module.exports = {
    entry: {
        app: __dirname + '/src/index.js'
    },
    output: {
      path: __dirname + '/public',
      filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        inline: true,
        port: 9999
     },
    module : {
      rules : [
        {
          test : /\.jsx?/,
          loader : 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
        }
      ]
    }
  };

src/index.js -- 试试 1

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom'
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

class Car extends Component {
    constructor(props){
        super(props);

        console.log('Inside Car Constructor');
    };
    redner(){
        return(<h1>Cars</h1>);
    }
}

class Home extends Component {
    constructor(props){
        super(props);

        console.log('Inside Constructor');
    };
    render(){
        return (
        <div>
            <h1>Hi</h1>
            <Router history={history}>
                <div>
                    <Route exact path="/" Component={Home} />
                    <Route path="/car" Component={Car} />
                </div>
            </Router>
        </div>
    );
    }
}

render(
    <Home/>,
    document.getElementById('container')
);

index.js -- 尝试 2

class Home extends Component {
    constructor(props){
        super(props);

        console.log('Inside Constructor');
    };
    render(){
        return (<h1>Hi</h1>);
    }
}

render(
    <Router history={history}>
        <Switch>
            <Route exact path="/" Component={Home} />
            <Route path="/car" Component={Car} />
        </Switch>
    </Router>,
    document.getElementById('container')
);

index.js -- 尝试 3

render(
    <Router history={history}>
        <Route exact path="/" Component={Home} />
        <Route path="/car" Component={Car} />
    </Router>,
    document.getElementById('container')
);

index.js -- 尝试 4

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom'
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

class Car extends Component {
    constructor(props){
        super(props);

        console.log("Inside Car constructor");
    };

    render(){
        return (<h1>Carrssss</h1>);
    }
}

class Home extends Component {
    constructor(props){
        super(props);

        console.log("Inside home constructor");
    };

    render(){
        return (<h1>Hi</h1>);
    }
}

render(
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/car" component={Car} />
        </Switch>
    </Router>, 
    document.getElementById('container')
);

我已经尝试了上述所有方法，但路径似乎不起作用。 在第一次尝试中，/ 似乎有效，但 /car 无效。 在第二次和第三次尝试中，甚至 / 都不适合我。 我该如何解决这个错误？为什么会这样？

我尝试过使用 react-router 和 react-router-dom 包。 尝试使用 BrowserRouter 代替 Router，仍然无法计算出我们的任何东西。

Answer 1

不是：

<Route exact path="/" Component={Home} />

是的

<Route exact path="/" component={Home} />

注意component 部分。

第二个错误是您的第一次尝试有错字。在Car 组件中，您使用的是render 而不是redner。

工作代码：

import { BrowserRouter, Route } from "react-router-dom";

class Car extends React.Component {
  render() {
    return (<h1>Cars</h1>);
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>Hi foo</h1>
        <BrowserRouter>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/car" component={Car} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

ReactDOM.render(
  <Home />,
  document.getElementById("container")
);

Answer 2

我突然想到的一件事是你正在抓取一个名为 { Router } 的组件，而 react-router-dom 有一个名为 { BrowserRouter } 的组件通常以这种方式导入

import { BrowserRouter as Router } from 'react-router-dom';

此外，您将自定义 history 属性传递给您的路由器。 React-Router 使用它的 history 属性来确定你在哪里以及要渲染什么。覆盖这可能会导致问题。您可以在 Web 浏览器中使用 React 开发工具亲自查看。所有 Routed 组件和用 WithRouter 包裹的组件都会有一个由 React-Router 传递的 history prop。