Question

我有新的反应，我想使用路由器导航下注页面/组件。我找不到太多，但是在网上学习了一个教程，但我不认为我做得对，因为我只是犯了错误。

当我导入路由器然后使用此行时：ReactDOM:render(...)它会给我错误，我不确定如何正确执行。
我不确定路由器路径的位置。我总是把它放进import React from 'react'; import ReactDOM from 'react-dom'; import Router from'react-router' const { Router, Route, IndexRoute, IndexLink, hashHistory, Link } = ReactRouter; class App extends React.Component { render () { return ( <div> <button><Link to="/page">Page</Link></button> Router history={ReactRouter.hashHistory}> <Route path="/" component={App}> </Route> <Route path="/page" component={Page}> </Route> </Router> </div> ); } } export default App;。我只在我的index.js文件中渲染，我把它放在那里似乎不对，因为我觉得我应该只渲染App组件（为了良好的练习）。我错了吗？

非常感谢！

App.js：

    ReactDOM.render(<App/>, document.getElementById('app'));

index.js：

function loadPage(page) {

    var container = $("#main");
    var element = $("<div>");
    var scope = $rootScope.$new();

    server.loadViewTemplate(page.view).then(function(template) {
        element.html(template);
        container.html(element);
        if (page.controller) {
            var templateController = $controller(page.controller, { $scope: scope });
            element.children().data('$ngControllerController', templateController);
        }
        $compile(element)(scope);
    });


}

Answer 1

在React路由器V4之后发生了一些变化，你应该确保你找到的代码示例适合你正在使用的版本。

我正在使用v4，这就是我所做的：

<强> App.js：

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
....
....

<BrowserRouter>
       <Switch>
          <Route path="/settings" component={Settings} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/login" component={Login} />
          <Route path="/" component={Login} />
        </Switch>  
  </BrowserRouter>

React - 如何包含反应路由器？

1 个答案: