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使用其历史记录道具来确定您的位置以及呈现的内容。覆盖此问题可能会导致问题。您可以在Web浏览器中使用React Dev Tools自己查看。所有路由组件和用WithRouter包装的组件都将由React-Router传递历史记录。

React.js路由器未呈现任何组件

2 个答案: