代码之家 › 专栏 › 技术社区 › Sangram Badi

无法在react路由器中呈现react组件

react-router reactjs javascript

Sangram Badi · 技术社区 · 8 年前

我在元件的布线上有问题

index.js

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

import App from './app';

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

app.jsx

这里我路由2组件。登录名和主要组件。在主要组件中有许多路由器将用于仪表板。

我的问题 :英寸 <Switch> <Route> 可以渲染,但它不是从第二路由器渲染,如果我硬编码的网址

http://localhost:3000/#/login ==渲染

http://localhost:3000/#/main =不渲染

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

import Login from './login';
import Main from './main';

import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();

class App extends Component {
    constructor(props) {
        super(props);

        window.token = '';
    }

    render() {
        return <div>
                <Router>
                    <Switch>
                        <Route to="/login" component={Login} exact />
                        <Route to="/main" component={Main} exact/>
                    </Switch>
                </Router>
            </div>;
    }
}

export default App;

import React, {Component} from 'react';
import ReactDOM from "react-dom";

import { HashRouter, Route, Switch } from "react-router-dom";

import indexRoutes from "routes/index.jsx";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import Login from './login';

class Main extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <HashRouter>
        <Switch>

          {indexRoutes.map((prop, key) => {
            return <Route to={prop.path} component={prop.component} key={key} />;
          })}
        </Switch>
      </HashRouter>;
    }
}

export default Main;

3 回复 | 直到 8 年前

Satyaki 8 年前

使用

<Route path="/login" component={Login} exact />

to 使用 path

Janaka Dissanayake 8 年前

<Route path="/login" component={Login} /> <Route path="/main" component={Main} exact/>

使用路径代替至

japesh singhal 8 年前

不要在main Route中使用exact属性,如下所示。

class App extends Component {
  render() {
    return <div>
            <Router>
                <Switch>
                    ...
                    <Route to="/main" component={Main} />
                </Switch>
            </Router>
        </div>;
  }
}

Sushmit Sagar 6 年前

你的代码有两个问题

你的第一个 app.jsx 文件:

<Switch>
  <Route 
   to="/login"       // <== should be path="/login"
   component={Login} 
   exact
   />
  <Route 
   to="/main"        // <== should be path="/main" 
   component={Main} 
   exact             // <== remove exact prop for the nested routes to work
   /> 
</Switch>

在这里 to 道具实际上属于 <Link/> 组件提供方 react-router <Route /> 组件,应该是 path 道具。
如果要在中渲染子管线 <路线/> 那我们就不用了 exact 对父母的支持 <路线/> 组件。

你的第二个 main.jsx 文件:

  indexRoutes.map((prop, key) => {
    return (
     <Route 
       to={prop.path} // <== should be path={prop.path}
       component={prop.component} 
       key={key} />;
     );
  })

又变了道具道具。