reactjs - 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，但仍然无法计算出我们的任何东西。

标签： reactjsnpmreact-routerreact-router-dom

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