Question

我使用React Router，并且我可以在屏幕上看到“注册”链接但是，当我按此链接时，什么都不会发生，请告诉我为什么。 Main.js

import ReactDOM from 'react-dom';
import React from 'react';
//import { Router, Route, hashHistory } from 'react-router';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import WizardIndex from './components/WizardIndex.js';
ReactDOM.render(

    <BrowserRouter>
                <App path="/" component={App}>
                        <Route path="/signup" component={ WizardIndex }/>
                </App>
    </BrowserRouter>,
    document.getElementById('mount-point')
);

App.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const App = React.createClass({
render: function(){
        return (
            <div className='App'>
                    <div className='menu-bar'>
                    <div className='menu-item'>
                    <h3>App</h3>
                    <Link to='/signup'>Signup</Link>
                    </div>
                    <div className='content'>
                    { this.props.children }
                    </div>
                    </div>
            </div>
    );



    }
});

export default App;

WisardIndex.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import WizardForm from "./WizardForm";


const Index = React.createClass({
render(){
    return (
 <h3>123</h3>
  );
  }
});

export default Index;

我无法理解我在App.jsx中设置了this.props.children。我将“路由和思考”包括在规则内，但结果没有任何作用

Answer 1

首先，如果您可以编译和运行给定的源代码，则意味着您正在使用React的非常老的版本，这是因为不再有React.createClass这样的东西。更新它。

第二，我认为您误解了react-router-dom的概念。该行不包含<App path="/" ...效果，因为您无法为path分配component或App道具。如果将App组件呈现为BrowserRouter的子代，则意味着“我用一个组件包围着每条路线，这就是App组件。App组件应该将每条路线都呈现为子代。”

我假设您将以Class Component的形式创建组件，然后正确的代码将如下所示：

Main.js：

import ReactDOM from 'react-dom';
import React from 'react';
//import { Router, Route, hashHistory } from 'react-router';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import WizardIndex from './components/WizardIndex.jsx';
ReactDOM.render(
    <BrowserRouter>
                <App>
                       <Route path="/signup" component={ WizardIndex }/>
                </App>
    </BrowserRouter>,
    document.getElementById('mount-point')
);

App.jsx：

import React from "react";
import { Link } from "react-router-dom";

class App extends React.Component {
    render() {
        const { children } = this.props;
        return (
            <div className="App">
              <div className="menu-bar">
                <div className="menu-item">
                  <h3>App</h3>
                  <Link to="/signup">Signup</Link>
                </div>
                <div className="content">{children}</div>
              </div>
            </div>
         );
    }
}

export default App;

WizardIndex.jsx：

import React from "react";
import ReactDOM from "react-dom";

class WizardIndex extends React.Component {
  render() {
    return <h3>123</h3>;
  }
}

export default WizardIndex;

实际上我已经在codeandbox中为您编写了代码，您可以在此处查看适合您情况的工作代码：

https://codesandbox.io/s/rr1nv610wp

为什么当组件存在时我看不到路由器的结果React

1 个答案: