标签: react-routing

我正在使用react router 1.0.2,我的路由如下所示:

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home}/>
        <Route path="triangles" component={Triangles}/>
      </Route>
    </Router>
  </Provider>,
  document.querySelector('.container')
);

我的应用程序组件看起来像这样,我想我可以传递道具中的位置:

import React, {Component} from 'react';

import Menu from './menu';

export default class App extends Component {
  render() {
    return (
      <div>
        <Menu/>
        <div className="jumbotron">
         {this.props.children && React.cloneElement(this.props.children, {
            location: this.props.location
          })}
        </div>
      </div>
    );
  }
};

我想在Menu组件上有条件地设置一个活动类:

import React, {Component} from 'react';

import { pushPath } from 'redux-simple-router';
import { Link } from 'react-router';

    export default class Menu …

我正在使用react-router(createBrowserHistory)作为我的反应应用程序.

以下是我的代码

var ReactDOM = require('react-dom') ;

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var browserHistory = require('react-router');
var createBrowserHistory = require('history/lib/createBrowserHistory');

var CL = require('./page1/1.jsx');
var Validation = require('./page3/3.jsx');
var Infos = require('./page4/4.jsx');
var Confirm = require('./page7/7.jsx');
var Upload = require('./page8/8.jsx');

module.exports = (

  <Router history={new createBrowserHistory()}> 
    <Route path='/' component={CL}></Route>                                                                                                                                     
    <Route path='/validation' component={Validation}></Route>                                                                                                                                     
    <Route path='/infos' component={Infos}></Route>                                                                                                                                     
    <Route path='/confirm' component={Confirm}></Route>                                                                                                                                     
    <Route path='/upload' component={Upload}></Route>                                                                                                                                     
  </Router>
)

Wen在本地运行IIS,我在浏览器上访问localhost,我可以获得"CL"组件并在页面上显示,但是,如果我去/验证,我会得到

Failed to load resource: the …

我正在使用React和Material-UI创建一个应用程序,我也包含了React-router.但是当我运行我的应用程序时,我得到以下错误(Uncaught TypeError:(0,_reactDom.ReactDOM)不是一个函数).

我使用的是React v0.14.3和React-Router v1.0.2

BodyComponent我写了一个不同的文件,我将它导入我的main.js

我试过ReactDOM.render但是我得到了以下错误

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.

我为此创造了小提琴:

https://jsfiddle.net/69z2wepo/23814/

以下是我的代码:(更新的代码)

'use strict';
import React from 'react';
import mui from 'material-ui';
import PhysicalView from './playground/PhysicalViewComponent';
import DataTable from './DataTableComponent';
const AppBar = require('material-ui/lib/app-bar');
require('styles//Body.sass');

const LeftNav = require('material-ui/lib/left-nav');

const MenuItem = mui.MenuItem;
const injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();


var menuItems = [{
  route: 'device-view',
  text: 'Device'
}, {
  type: MenuItem.Types.SUBHEADER,
  text: '123'
}, {
  route: 'ola',
  text: 'ola'
}, {
  route: 'bridges',
  text: 'Bridges'
}, {
  route: …

我正在摆弄react-router,试图实现简单的路由.我在他们的例子中写了我的代码(但没有imports)https://github.com/rackt/react-router#whats-it-look-like.

我在浏览器中收到此错误:

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.

这就是我的工作.

我在页面上附加脚本,ReactRouter.min.js我的代码在react-routes.js.而且还react和react-dom和jQuery(所有三个app.js):

<script src="/js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="/js/react-routes.js" type="text/javascript" charset="utf-8"></script>

这是我的react-router.js,尚未编译:

'use strict';
window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;

const Foo = React.createClass({
    render() {
        return (
            <div>
                <h1>HELLO, me FOO</h1>
            </div>
        )
    }
});

ReactDOM.render((
    <Router>
        <Route path="/" >
            <Route path="/page/one" component={Foo}/>
        </Route>
    </Router>
), document.getElementById('content-section'))

这是我react-router.js与Babel汇编后的.我在页面上正好附上了这个:

babel --presets react -o …

嘿，我在尝试使用react-native-router-flux时获取当前场景关键。

我的路线文件：

const AppRouter = connect()(Router)

class Routes extends Component {
  render() {
    function selector(props) {
      console.log(props)
      // GoogleAnalytics.trackView(props.navigationState)
      return props.auth.isLoggedIn ? (props.auth.isVerified? 'home': 'authenticate') : 'authenticate'
    }

    const component = connect(state => ({
      auth: state.auth,
    }))(Switch)

    return (
      <AppRouter>
        <Scene key="root" component={component} tabs selector={selector} hideNavBar hideTabBar>
          <Scene key="authenticate" hideTabBar>
            <Scene type="replace" key="login" title="Login" initial component={GradientBackground(LoginScreen)} hideNavBar/>
            <Scene type="replace" key="register" component={GradientBackground(RegisterScreen)} hideNavBar/>
            <Scene type="replace" key="forgotPassword" title="forgotPassword" component={GradientBackground(ForgotPasswordScreen)} hideNavBar/>
            <Scene type="replace" key="emailConfirmation" component={GradientBackground(EmailConfirmationScreen)} hideNavBar/>
          </Scene>
          <Scene key="home" component={NavigationDrawer} type="replace">
            {require('./scenes/home')}
          </Scene> …

我有一个带有NotFound组件的react-router 3.0.0设置,我将其作为后备显示:

<Route component={NotFound} path="*"/>

但是,这会返回重定向,Google抓取工具会抱怨软404.我可以重定向到我的NotFound组件并发送404,类似于Github的例子吗？我从这里尝试了以下建议:如何让路由器响应404状态代码？

<Route component={NotFound} path="*" status={404}/>

但这只是给了我404而没有显示组件.

如何实现上述目标？

我是 React 的新手，当我单击View按钮时，我很难弄清楚如何返回一个新页面（一个组件）。我有一个用户表，每行都有一个查看按钮。我只能在完全相同的页面中检索数据，但我想在另一个页面中检索我的视图详细信息，其 url 上的 id，例如：http://user-details-1。有人可以帮我弄这个吗。谢谢！

这是我的视图代码/组件：

import React, { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";

const ViewUserDetaiils = (props) => {
  const [user, setUser] = useState(props.currentUser);

  useEffect(() => {
    setUser(props.currentUser);
  }, [props]);

  return (
    <Form>
      <div>
        <div>
          <strong>Id:</strong> {user.id}{" "}
        </div>
        <div>
          <strong>Name:</strong> {user.name}{" "}
        </div>
        <div>
          <strong>Contact:</strong> {user.contact}{" "}
        </div>
        <div>
          <strong>Email:</strong> {user.email}{" "}
        </div>
      </div>
    </Form>
  );
};

export default ViewUserDetails;

这是我的路由：

import React, { Component } from "react";
import …

我当前的 server.js：

let express = require('express');
let harp = require('harp');
let path = require('path');

let app = express();

app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));

let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );

// ... other routes for data fetching ...

// For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

当我在mysite.com/. 但是，如果我输入mySite.com/someRoute，它会中断。具体来说，我在控制台中看到以下内容：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/dashboards/styles/normalize-3.0.3.min.css".
...
Uncaught …

有没有办法从反应应用程序的网址中删除查询字符串？

this.history.push('component/:id')

我希望在导航时从浏览器 URL 中删除 id。

我是React的新手,我想开发一个单页应用程序,所以我正在使用react-router四路由.

在main.js下面,我指定路线

import React from 'react';
import {Router,Route} from 'react-router';
import {App} from './components/App';
import {Login} from './components/Login';
import {Home} from './components/Home';
import { history } from 'react-router';

React.render(
<Router history={history}>
    <Route path="/" component={App}>
        <Route path="home" component={Home}/>
        <Route path="login" component={Login}/>

    </Route>
</Router>,
document.getElementById('main')
);

然后是App.js,你可以看到我希望有一个固定的页眉和页脚,然后根据路线改变页面的内容.

import React from 'react';
import {Header} from './Header';
import {Footer} from './Footer';

export class App extends React.Component {


render() {
    console.log(this.props.children);
    return (<div>
        <Header/>
        <div className="page-content">
            {this.props.children}
        </div>
        <Footer/>
    </div>);
}


}

使用此代码,一旦应用程序加载了路径("/"),我需要单击主页链接以显示主页内容,但是我希望在首次加载应用程序时默认显示.

我怎样才能做到这一点？

谢谢!!