Javascript 持久导航路由器

使用React路由器在我的应用程序中创建持久导航时遇到困难

使用

创建react应用程序和
react路由器“^3.0.2”

我正试图在页面顶部有一个导航，上面有几个链接。我一直收到的错误是
未捕获错误：在路由器上下文之外呈现的无法导航。

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';
import { Router, Route } from 'react-router';
import Routes from './routes';
import App from './components/App';
import './index.css';
import Navigation from './components/Navigation';

ReactDOM.render(
  <div>
    <Navigation />
    <Routes history={browserHistory} />
  </div>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react router”导入{browserHistory}；
从“react Router”导入{Router，Route}；
从“./Routes”导入路由；
从“./components/App”导入应用程序；
导入“./index.css”；
从“./components/Navigation”导入导航；
ReactDOM.render(
,
document.getElementById（'root'））
);

导航/index.js

import React, { Component } from 'react';
import { Link } from 'react-router';

class Navigation extends Component {
  render() {
     return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="not-found">Not Found</Link></li>
        </ul>
      </div>
    );
  }
}

export default Navigation;

import React from 'react';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router';
import App from './components/App';
import About from './components/About';
import NotFound from './components/NotFound';
import Navigation from './components/Navigation';

const Routes = (props) => (
  <div>
    <Router {...props}>
      <Route path="/" component={App} />
      <Route path="/about" component={About}/>
      <Route path="*" component={NotFound} />
    </Router>
  </div>
);

export default Routes;

import React，{Component}来自'React'；
从“反应路由器”导入{Link}；
类导航扩展了组件{
render（）{
返回(

关于
找不到

);
}
}
导出默认导航；

routes.js

import React, { Component } from 'react';
import { Link } from 'react-router';

class Navigation extends Component {
  render() {
     return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="not-found">Not Found</Link></li>
        </ul>
      </div>
    );
  }
}

export default Navigation;

import React from 'react';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router';
import App from './components/App';
import About from './components/About';
import NotFound from './components/NotFound';
import Navigation from './components/Navigation';

const Routes = (props) => (
  <div>
    <Router {...props}>
      <Route path="/" component={App} />
      <Route path="/about" component={About}/>
      <Route path="*" component={NotFound} />
    </Router>
  </div>
);

export default Routes;

从“React”导入React；
从“react Router”导入{Router，Route，IndexRoute，Link，browserHistory}；
从“./components/App”导入应用程序；
从“./components/About”导入关于；
从“/components/NotFound”导入NotFound；
从“./components/Navigation”导入导航；
常量路由=（道具）=>(
);
导出默认路径；

我可以通过url（即localhost:8080/about）导航并呈现正确的页面。但是，无法确定如何使导航正常工作并呈现正确的链接。
您应该将
导航组件呈现为
应用程序的一部分
组件，而不是呈现在
index.js

应用程序
应该看起来像

class App extends Component {
  render() {
     return (
      <div>
        <Navigation />
        {this.props.children}
      </div>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
{this.props.children}
);
}
}

你的路线也需要改变一点

<Router {...props}>
  <Route path="/" component={App}>
    {/* If you have a home page in your App component already, move it to a Home component */}
    <IndexRoute component={Home} />
    <Route path="/about" component={About}/>
    <Route path="*" component={NotFound} />
  </Route>
</Router>


{/*如果应用程序组件中已经有主页，请将其移动到主页组件*/}

React路由器将子例程中的组件作为子路由传递到父路由

例如，查看他们文档中的。
因此我很难理解这一点。应用程序实际上应该只是我的IndexRoute，而嵌套在应用程序内部的应该是我的所有其他组件吗？所以我用导航呈现了应用程序，现在如果你点击“关于”，你将呈现嵌套在应用程序组件内的关于组件？没错，你将在应用程序内呈现关于（这就是
{this.props.children}
所做的）。实际上，我要编辑我的答案，我只是注意到你需要稍微调整一下你的路线。。。等等..你也可以让事情变得更简单，只要不把
routes.js
分开，只把你的路线放在
index.js
和
Navigation
中，这些都是在
应用程序中定义的。。。但这取决于你想如何组织事情（或者你的导航有多疯狂）。是的，这就是我要做的。它仍然没有像我期望的那样工作。所以习惯于用角度来把这些东西分开，从我在例子中看到的反应中，其实不需要这样做