在导航栏上访问匹配对象-React，Redux和TypeScript

Question

I need the match object at the navbar. I am using React, Redux and TypeScript.

Here is my boot-client file:

    import './css/site.css';
    import 'bootstrap';
    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { AppContainer } from 'react-hot-loader';
    import { Provider } from 'react-redux';
    import { ConnectedRouter } from 'react-router-redux';
    import { createBrowserHistory } from 'history';
    import configureStore from './configureStore';
    import { ApplicationState } from './store/initialState';
    import * as RoutesModule from './routes';
    let routes = RoutesModule.routes;

    // Create browser history to use in the Redux store
    const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
    const history = createBrowserHistory({ basename: baseUrl });

    // Get the application-wide store instance, prepopulating with state from the server where available.
    const initialState = (window as any).initialReduxState as ApplicationState;
    const store = configureStore(history, initialState);

    function renderApp() {
        // This code starts up the React app when it runs in a browser. It sets up the routing configuration
        // and injects the app into a DOM element.
        ReactDOM.render(
            <AppContainer>
                <Provider store={ store }>
                    <ConnectedRouter history={ history } children={ routes } />
                </Provider>
            </AppContainer>,
            document.getElementById('react-app')
        );
    }

    renderApp();

    // Allow Hot Module Replacement
    if (module.hot) {
        module.hot.accept('./routes', () => {
            routes = require<typeof RoutesModule>('./routes').routes;
            renderApp();
        });
    }

This is my boot-server file:



  import * as React from 'react';
    import { Provider } from 'react-redux';
    import { renderToString } from 'react-dom/server';
    import { StaticRouter } from 'react-router-dom';
    import { replace } from 'react-router-redux';
    import { createMemoryHistory } from 'history';
    import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
    import { routes } from './routes';
    import configureStore from './configureStore';

    export default createServerRenderer(params => {
        return new Promise<RenderResult>((resolve, reject) => {
            // Prepare Redux store with in-memory history, and dispatch a navigation event
            // corresponding to the incoming URL
            const basename = params.baseUrl.substring(0, params.baseUrl.length - 1); // Remove trailing slash
            const urlAfterBasename = params.url.substring(basename.length);
            const store = configureStore(createMemoryHistory());
            store.dispatch(replace(urlAfterBasename));

            // Prepare an instance of the application and perform an inital render that will
            // cause any async tasks (e.g., data access) to begin
            const routerContext: any = {};
            const app = (
                <Provider store={ store }>
                    <StaticRouter basename={ basename }
                                  context={ routerContext }
                                  location={ params.location.path }
                                  children={ routes } />
                </Provider>
            );
            renderToString(app);

            // If there's a redirection, just send this information back to the host application
            if (routerContext.url) {
                resolve({ redirectUrl: routerContext.url });
                return;
            }

            // Once any async tasks are done, we can perform the final render
            // We also send the redux store state, so the client can continue execution where the server left off
            params.domainTasks.then(() => {
                resolve({
                    html: renderToString(app),
                    globals: { initialReduxState: store.getState() }
                });
            }, reject); // Also propagate any errors back into the host application
        });
    });  

This is the Layout file:

    import * as React from 'react';
import {RouteComponentProps} from 'react-router-dom';
import {withRouter} from 'react-router';
import {connect} from 'react-redux';
import * as actions from '../Features/LanguageChanger/actions/languageChanger';
import LayoutProps from '../propertyTypes/LayoutProps';
import {ApplicationState} from '../store/initialState';
import Navbar from '../Features/Navbar/Navbar';
import NavbarContainer from '../containers/NavbarContainer';

class Layout extends React.Component<LayoutProps, {}> {
    public render() {
        return <div className='main-container'>
                <NavbarContainer {...this.props}/>
                {this.props.children}
        </div>;
    }
}

export default withRouter(connect(
    (state: ApplicationState) => state.language,
    actions.actionCreators,
)(Layout));

And the routes file:

 import * as React from 'react';
import {Route} from 'react-router-dom';
import {Switch} from 'react-router';
import {Redirect} from 'react-router';
import Layout from './components/Layout';
import Home from './Features/Home/Home';
import About from './Features/About/About';
import ProductInfo from './Features/ProductInfo/ProductInfo';
import Questions from './Features/Questions/Questions';
import Shop from './Features/Shop/Shop';
import Contacts from './Features/Contacts/Contacts';

export const routes =
    <Layout>
            <Switch>
                <Route path='/:language/about' component={About}/>
                <Route path='/:language/product-info' component={ProductInfo}/>
                <Route path='/:language/questions' component={Questions}/>
                <Route path='/:language/shop' component={Shop}/>
                <Route path='/:language/contact-us' component={Contacts}/>
                <Route path='/:language' component={Home}/>
                <Route path='/' component={() => (<Redirect to={'/en'}/>)}/>
            </Switch>
    </Layout>;

I need the match object because I need to make requests based on the language in the URL. My languageChanger component is in the Navbar. My solution for the problem is to extract manually the things I nedd from the URL. Has anyone had the same problem?

Answer 1

To get the correct route props in your component you should wrap withRouter with connect

export default connect(/* ... */)(withRouter(Layout);

Which will update your component if the location changed and is not blocked by connect . (You can read more about in the React Router documentation

To get the placeholder :langauge from your path you have to wrap your component in a route component which has the pattern as path property.

Inside of your Layout component:

/* ... */
return (
    <div className='main-container'>
        <Router path="/:language" render={({ match ) => (
            <NavbarContainer {...this.props} language={match.params.language} />
        )} />
        {this.props.children}
    </div>;
);
/* ... */

This way the navbar will be only rendered if it matches the path pattern. You could change render to children but then you have to handle a possible match which is null. React Router has a nice documentation about the possibilities of Route .

Anyway you have to make sure that the value of match.params.language is a real language code because somebody could enter the path /foo in the address bar and your language will be foo .