प्रतिक्रिया और HashRouter - गया रिक्त पृष्ठ

वोट
0

बाद मैं द्वारा ग्राहक के पक्ष मार्ग पर setted react-router-domसब मुझे मिल गया यह सिर्फ खाली खाली पृष्ठ है।

यहाँ

तो, मेरे सेटअप यहाँ है। मुझे यकीन है कि कुछ गलत है, लेकिन मैं यह नहीं मिल सकता है।

तो कैसे आते हैं? क्या गलत है?

सूचकांक:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes} />
    </Provider>,
    document.getElementById(content)
);

मार्गों यहां हैं:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import App from './containers/app.js';
import Settings from './components/settings/settings.js';
import NotFound from './components/common/notfound';

export default (
    <Route exact path=/ component={App}>
        <Route exact path=/settings component={Settings} />
        <Route path=* component={NotFound} />
    </Route>
)
22/08/2017 को 07:07
उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
3

इस खंड को बदलने के लिए प्रयास करें:

ReactDOM.render(
    <Provider store={store}>
    <Router>
      <Route exact path="/" component={App}>
        <Route exact path="/settings" component={Settings} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
    </Provider>,
    document.getElementById("content")
);

मुझे नहीं लगता कि प्रतिक्रिया रूटर v4 इस हिस्से को पहचानता है: <Router routes={routes} />

संशोधित: वहाँ ऊपर कोड के साथ दो समस्याएं हैं।

1) आप एक मार्ग के अंदर एक subroute जगह नहीं होनी चाहिए। इस भाग गलत है:

<Route exact path="/" component={App}>
  <Route exact path="/settings" component={Settings} />
  <Route path="*" component={NotFound} />
</Route>

2) <NotFound />हमेशा कोई बात नहीं क्या रास्ता है प्रदान की गई है।

उपाय:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
    HashRouter as Router,
    Route,
    Link,
} from 'react-router-dom'

import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
          <Route path="/" component={App} />
        </Router>
    </Provider>,
    document.getElementById("content")
);

App.js

जहां सामग्री को रखना चाहते हैं के लिए इस कोड सम्मिलित करें:

<Switch>
   <Route exact path="/" component={Home} />
   <Route exact path="/settings" component={Settings} />
   <Route path="*" component={NotFound} />
</Switch>

जोड़ने के लिए मत भूलना import {Switch, Route} from 'react-router-dom';

22/08/2017 को 07:55
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more