发表新帖
发表新帖

react-router dynamic segments crash when accessed

后端 未结
关注
2 728
慢半拍i
慢半拍i 2020-12-13 08:52

I have a route configuration that looks like this (showing only the parts that I think may be relevant):

var React = require(\'react\');

var Router = require
相关标签:
2条回答
  • 我在风中等你
    2020-12-13 09:23

    I am not encountering the error that you're seeing. It seems like your code is all right, so it's probably something that you didn't paste.

    giving the information, I've build a quick project according to your spec and here's my setup

    'use strict';

var React           = require('react'),
    Router          = require('react-router'),
    AppHandler      = require('./pages/app.js'),
    HomeHandler     = require('./pages/home.js'),
    SettingsHandler = require('./pages/setting.js'),
    NotFoundHandler = require('./pages/not-found.js'),

    Route           = Router.Route,
    NotFoundRoute   = Router.NotFoundRoute,
    DefaultRoute    = Router.DefaultRoute,
    Routes;

Routes = (
    /* jshint ignore:start */
    <Route handler={AppHandler}>
        <DefaultRoute handler={HomeHandler}/>
        <Route name='home' path='/home' handler={HomeHandler}/>
        <Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
        <NotFoundRoute handler={NotFoundHandler}/>
    </Route>
    /* jshint ignore:end */
);

Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
    React.render(<Handler/>, document.body);
});

    I'm skipping the home and not found since those are not the problem, here's my setup in settings.js

    'use strict';
var React = require('react')
    Router = require('react-router');

var Setting = React.createClass({

    mixins: [Router.State],
    componentDidMount: function() {
        //console.log(this.getParams());
    },

    render: function() {
        /* jshint ignore:start */
        console.log(this.getParams());
        return (
            <div>this is setting</div>
        );
        /* jshint ignore:end */
    }

});

module.exports = Setting;

    hope these will help

    0 讨论(0)
  • 北海茫月
    2020-12-13 09:42

    Thanks for your analysis, it helped me to realize it wasn't an issue with React Router but my own paths.

    I added <base href="/" /> into the <head> of my index.html and it worked (:

    Edit for React Router 3:

    Since early 2016, React Router will show a warning when you set <base>:

    Warning: Automatically setting basename using <base href> is deprecated 
and will be removed in the next major release. The semantics of <base href>    
are subtly different from basename. Please pass the basename explicitly in the
options to createHistory

    It's better to do something like this instead:

    const history = useRouterHistory(createHistory)({
    basename: '/'
});
    0 讨论(0)
 看不清?
提交回复
热议问题