Question

我是React和redux的新手。我在浏览网址时遇到问题。（请查看下面的文件）。 Index.js是我的反应文件，链接到带有id＆＃39; index＆＃39;的html页面。在Index.js文件中，我正在渲染Home.jsx文件＆＃39; Home＆＃39;零件。在Home.jsx文件中，我添加了两个Routes-List，AddForm，其中显示了路径。此外，我还提供了一个反应组件＆＃39; HomeNavBar＆＃39;。 AddForm.js和ListBox.jsx分别是AddForm和List组件的反应文件。带有HomeNavBar组件的HomeNavBar.jsx有一个Link＆＃39; add＆＃39;如图所示。默认情况下，将显示List组件。点击链接时添加＆＃39;我想用AddForm组件替换List组件，AddForm组件是从AddForm.js呈现。现在问题是当我点击链接时，地址栏中的网址正在改变。但组件没有变化。仍显示List组件。控制台没有错误。有人请帮助我。（说真的，我想用路由器做这件事）

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from '../store/store';
import Home from './Home.jsx';

ReactDOM.render(<Provider store={store}>
           <Home />
                </Provider>, document.getElementById('index'));

Home.jsx

import React from 'react';
import List from './ListBox.jsx';
import AddForm from './AddForm.react.js'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import HomeNavBar from './HomeNavBar.jsx'

class Home extends React.Component {
    render(){
        return(
                -------blah blah----
                <div>Blah blah balh</div>
                <HomeNavBar />
                <div>
                <Router>
                <Switch>

                    <Route exact path="/" component={List} />
                    <Route path="/add" component={AddForm} />

                </Switch>
                </Router>
                </div>
                ------blah--blah--------
          )}}
export default Home

AddForm.js

also a react file with some html form contents

ListBox.jsx

also a react file with some html contents

HomeNavBar.jsx

import React from 'react';
    import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


class HomeNavBar extends React.Component {

render() {
    return(
      <Router>
            <div>
                 <li><Link to={'/add'}>Add Movie</Link></li>
                 --------blah blah blah-------------------
            </div>
     </ Router>
    );
}
 }
export default HomeNavBar

web.config文件是

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  context: __dirname,

  entry: './assets/js/components/Index.react.js', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs

  output: {
      path: path.resolve('./assets/bundles/'),
      filename: "[name].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query:{ plugins: ['transform-decorators-legacy'] }}, // to transform JSX into JS
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'class-to-classname', query:{ plugins: ['transform-decorators-legacy'] }}, // to transform JSX into JS
    ],
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },
}

请查看demo here

在演示中，您可以看到，当我点击添加电影时，网址正在发生变化但内容却没有变化。内容仅在刷新时更改。

Answer 1

复制粘贴以下内容 - 在 Home.js

import React from 'react';

import HomeNavBar from './HomeNavBar.js'
import List from './ListBox.js';
import AddForm from './AddForm.js'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

class Home extends React.Component {
   render(){
     return(<Router>
               <div>
               <HomeNavBar/>
               <div>
                <Route exact path="/" component={List} />
                <Route path="/add" component={AddForm} />
               </div>
               </div>
          </Router>);
    }
}

export default Home

homeNavBar.js

中的

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

class HomeNavBar extends React.Component {
      render() {
         return(
              <div>
                   <Link to='/add'>Add Movie</Link>
              </div>
               );
    }
}

export default HomeNavBar

问题原因是： 将<Link />包含在<Router />内，而不是将整个呈现的组件包含在<Router />内。其他人可以更好地解释原因。

Answer 2

我认为你搞砸了你的路线。请在下面找到一些建议：

您可以将路线包裹在一些组件中，这些组件将呈现路线并且还可以具有导航链接。在你的情况下，如果你使用HomeNavBar，它将是这样的，

 <Router>
   <HomeNavBar>
    <Switch>
      <Route exact path="/" component={List} />
      <Route path="/add" component={AddForm} />
    </Switch>
   </HomeNavBar>
 </Router>

您已在HomeNavBar中再次定义了路线。我认为那些是不需要。它可以简单明了。您可以在此NavLink上使用Link，
```
...
<div>
  <NavLink to="/add">Add Movie</NavLink>
  ...
</div>
<div>
  {this.props.children}
<div>
...
```

希望这有帮助。

根据以上建议

更新 Working example

Answer 3

在主页组件中的路由器标记内移动 HomeNavBar

class Home extends React.Component {
render(){
    return(
            <div>
            <Router>
             <div>
              <HomeNavBar />
               <Switch>
                <Route exact path="/" component={List} />
                <Route path="/add" component={AddForm} />
               </Switch>
              </div>
             </Router>
            </div>
      )}}

并删除 HomeNavBar 组件中的路由器

class HomeNavBar extends React.Component {
render() {
    return(
            <div>
                 <li><Link to={'/add'}>Add Movie</Link></li>
            </div>
    );
}

以下是working demo

React组件未被替换

3 个答案: