Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

multiple pages with multiple routers #2899

Closed
WuXianglong opened this issue Jan 14, 2016 · 1 comment

Comments

2 participants
@WuXianglong
Copy link

commented Jan 14, 2016

My project is using webpack and HtmlWebpackPlugin to generate multiple html pages, every entry has a Router. Code like this:

webpack.config.js

module.exports = merge(common, {
  entry: {
    index: path.join(PATHS.app, 'index.jsx'),
    user: path.join(PATHS.app, 'user.jsx')
  },
  output: {
    path: PATHS.build,
    publicPath: TARGET === 'build_dev' ? '/' : 'http://7xpmif.com2.z0.glb.qiniucdn.com/',
    filename: 'js/[chunkhash:8].[name].min.js',
    chunkFilename: 'js/[chunkhash:8].chunk.min.js'
  },
  devtool: 'hidden-source-map',
  plugins: [
    new CleanWebpackPlugin(['build']),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new ExtractTextPlugin('css/[hash:8].[name].css'),
    new webpack.optimize.UglifyJsPlugin({
      compress: {warnings: false},
      sourceMap: false
    }),
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: 'index.html',
      chunks: ['index', 'common'],
      favicon: path.join(__dirname, '/src/img/favicon.ico'),
      template: path.join(__dirname, '/src/templates/base.html')
    }),
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: 'user.html',
      chunks: ['user', 'common'],
      favicon: path.join(__dirname, '/src/img/favicon.ico'),
      template: path.join(__dirname, '/src/templates/base.html')
    })
  ]
});

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute} from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import history from './api/history';

import App from './components/App.jsx';
import NoFound from './components/base/NotFound.jsx';
import Home from './components/home/Home.jsx';
import ShowDetail from './components/show/ShowDetail.jsx';

injectTapEventPlugin();

ReactDOM.render(
  <Router history={history} onUpdate={() => window.scrollTo(0, 0)}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="show/:id" component={ShowDetail}/>
      <Route path="*" component={NoFound}/>
    </Route>
  </Router>,
  document.getElementById("body-wrapper")
);

user.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute} from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import history from './api/history';

import App from './components/App.jsx';
import Home from './components/home/Home.jsx';
import NoFound from './components/base/NotFound.jsx';
import User from './components/user/User.jsx';

injectTapEventPlugin();

ReactDOM.render(
  <Router history={history} onUpdate={() => window.scrollTo(0, 0)}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="login" component={Login}/>
      <Route path="register" component={Register}/>
      <Route path="forget_password" component={ForgetPassword}/>
      <Route path="user" component={UserIndex} onEnter={Auth.requireAuth}>
        <IndexRoute component={User}/>
        <Route path="profile" component={Profile}/>
      </Route>
      <Route path="*" component={NoFound}/>
    </Route>
  </Router>,
  document.getElementById("body-wrapper")
);

Now, i add <Link to="/user"> in Home page, but it will return 404 page when clicked...
It works when i use <a href="/user"></a>
Is there any other way to add user Link in home page?

THANKS!!

@taion

This comment has been minimized.

Copy link
Contributor

commented Jan 14, 2016

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Could you post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

@taion taion closed this Jan 14, 2016

@ReactTraining ReactTraining deleted a comment from dipesh008 Dec 27, 2017

@lock lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.