在单独的文件中声明React路由并导入

Question

我是React的新手我一直试图在单独的文件中声明路由,然后在索引文件中使用它.这是我的routes.js.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';
import App from './components/App';
import Template1 from './components/template1';
import Template2 from './components/template2';
import Template3 from './components/template3';

const routes = (
          <Route exact path="/" component={App}>
          <Route exact path="/sessionstate1" component={Template1}/>
          <Route exact path="/sessionstate2" component={Template2}/>
          <Route exact path="/sessionstate3" component={Template3}/>
    </Route>
)

export default routes

和index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,Redirect
} from 'react-router-dom';
import './styles/css/index.css';
import routes from './routes.js';

ReactDOM.render(
        <Router history={browserHistory} routes={routes} />,
        document.getElementById('root')
        );

我没有收到任何错误或警告,但页面没有加载.请告诉我我错过了什么谢谢

Answer 1

您不需要将 Routes 包装在 div 中。尝试这样的事情：

路由.js

import React from 'react';
import { Router, Route } from 'react-router';
import { Template1, Template2, Template3 } from './templates';

const createRoutes = () => (
    <Router>
      <Route exact path="/sessionstate1" component={Template1}/>
      <Route exact path="/sessionstate2" component={Template2}/>
      <Route exact path="/sessionstate3" component={Template3}/>
    </Router>
);

export default createRoutes;

索引.js

import ReactDOM from 'react-dom';
import createRoutes from './routes';

const routes = createRoutes();

ReactDOM.render(
  routes,
  document.getElementById('root')
);

Answer 2

索引.js：

import LoginRoutes from './login/routes'

let routeConfig = [];
routeConfig = routeConfig.concat(LoginRoutes(store));

<Router routes={routeConfig}/>

路线.js：

export default (store) => {

    return [
        {path: '/login', component: Login},
        {path: '/signup', component: SignUp},
    ]
}

通过这种方式，您可以添加来自不同文件的路线，并将您的路线定义传播到为路线提供上下文目的的不同文件夹。

如果您想使用 redux 并希望在路线上有一个 onEnter 事件，那么 store 变量就在那里。例子：

export default () => {

    const sessionEnter = (location) => {
        let {appId} = location.params;

        store.dispatch(loadApp(appId));

    return [
        {path: '/apps/:appId', component: App, onEnter: sessionEnter},
    ]
}

我发现 onEnter 事件是 componentDidMount 的一个很好的替代方案，在数据获取方面。在路由级别调用数据获取对我来说更有意义，因为我将组件视为表示级别的一部分。

Answer 3

好吧，几天前我遇到了同样的问题，而我的解决方案是这样的......

这是路由文件之一：

import React from 'react';
import { Route } from 'react-router-dom';
import { ComponentY } from '../components/functionalitys';

export default [
  <Route path="/appointment" component={ComponentY} exact key="create" />,
];

这是另一个路由文件：

import React from 'react';
import { Route } from 'react-router-dom';
import { LoginPage, Register } from '../components/user';

export default [
  <Route path="/register" component={Register} exact key="create" />,
  <Route path="/login" component={LoginPage} exact strict key="login" />
];

这就是我在主 app.js 中导入的方式：

import routesFromFile1 from './the/route';
import routesFromFile2 from './the/other/route';

class App extends Component{
  render(){
    return(
       <div className="wrapper">
           <section className="content container-fluid">
              <Switch>  
                <Route exact path="/" component={Home} strict={true} exact={true}/>
                <Route path="/500" component={InternalServer} />
                {routesFromFile1}
                {routesFromFile2}
              </Switch>
            </section>
          </div>
        )
    }
}

我希望这有助于某人！干杯！！

Answer 4

我认为问题在于Route将div. 尝试将它们包裹在Route类似以下的内容中。尝试这个小提琴并将路由包装器更改为 div。

const routes=(
      <Route >
        <Route exact path="/sessionstate1" component={Template1}/>
        <Route exact path="/sessionstate2" component={Template2}/>
        <Route exact path="/sessionstate3" component={Template3}/>
      </Route >
)
export default routes;

并将其导入到index.js

import routes from './routes.js';

ReactDOM.render(
    <Router history={browserHistory} routes={routes} />,
    document.getElementById('root')
);

Answer 5

像这样尝试一下

import React from "react";
import {HashRouter as Router, Route} from 'react-router-dom';
import NoteContainer from "./component/note/index.jsx";
import Header from "./component/common/header.jsx";

const App = (props) => {
    return (
        <div className="container">
            <Header/> {props.children}
        </div>
    );
};

var x = () => {
    return (
        <h1>Hello world!</h1>
    );
};
module.exports = () => {
    return (
        <Router>
            <App>
                <Route path="/" component={NoteContainer}/>
                <Route path="/inbox" component={x}/>
            </App>
        </Router>
    );
};